How to change "Choose File" or "Browse" button text and "No file selected" text. Example:

Question

I have following HTML code for displaying "Browse" or "Choose File" button:

<input type="file" name="file" id="file">

Answer 1

Use HTML input button for displaying the desired text. Keep "input type=file" invisible. When the button is clicked, call the click event of "input type=file". Use the onchange event of "input type=file" to show name of file chosen next to the button, when a file is chosen.

<apex:page controller="AttachFileCtlr">
    <apex:form>
        <apex:actionFunction name="saveAF" action="{!saveMethod}" reRender="attchFilePanel">
            <apex:param assignTo="{!fileName}" value="" name="fileName"/>
            <apex:param assignTo="{!fileValue}" value="" name="fileValue"/>
            <apex:param assignTo="{!contentType}" value="" name="contentType"/>
        </apex:actionFunction>
        <apex:pageBlock id="pageBlock1">
            <apex:outputPanel id="attchFilePanel">
                <input type="button" id="loadFileXml" value="Attach File" onclick="document.getElementById('file').click();"/>
                <p id="displayFileName" style="font-size:15px;"></p>
                <input type="file" id="file" name="attFile" style="display:none;" onchange="fileChosenFunc();"/>
                <apex:commandButton value="Save" onclick="saveFunc1(); return false;"/>
            </apex:outputPanel>
        </apex:pageBlock>
    </apex:form>
    <script>
    function fileChosenFunc()
    {
        var file1 = document.getElementById('file');
        if(file1 != null && 'files' in file1 && file1.files.length == 1)
        {    
            alert('one file chosen, name can be displayed');
            document.getElementById("displayFileName").innerHTML = file1.files[0].name;
        }
    }
    function saveFunc1()
    {
        var fileName = null;
        var file1 = document.getElementById('file');
        if(file1 != null)
        {
            if('files' in file1)
            {
                if(file1.files.length == 1)
                {
                    alert('one file attached');
                    var file1Obj = file1.files[0];
                    if(file1Obj.name != '')
                    {
                        fileName = file1Obj.name;
                    } 
                    var reader = new FileReader();
                    reader.onload = function() {
                        var fileContent = reader.result;
                        var base64 = 'base64,';
                        var dataStart = fileContent.indexOf(base64) + base64.length;
                        fileContent = fileContent.substring(dataStart);
                        var encodedFileContent = encodeURIComponent(fileContent);
                        saveAF(fileName, encodedFileContent, file1Obj.type);                
                    }
                    reader.readAsDataURL(file1Obj);    
                }
                else
                {
                    alert('no file attached');    
                }
            }    
        }
    }
    </script>
</apex:page>
Controller class :-
public class AttachFileCtlr {
    public String fileName {get;set;}
    public transient String fileValue {get;set;}
    public String contentType {get;set;}
    public Attachment attachment {
        get {
            if(attachment == null)
                attachment = new Attachment();
            return attachment;
        }
        set;
    }
    // Constructor
    public AttachFileCtlr()
    {
        fileName = '';
        fileValue = '';
        contentType = '';
    }
    public PageReference saveMethod()
    {
        if(attachment != null && fileName != null && fileName != ''
            && fileValue != null && fileValue != '')
        {
            try
            {
                attachment.ownerId = UserInfo.getUserId();
                attachment.ParentId = '5002C000006zvjyQAA'; // Case id on which attachment is to be attached
                attachment.Name = fileName;
                fileValue = EncodingUtil.urlDecode(fileValue, 'UTF-8');
                attachment.Body = EncodingUtil.base64Decode(fileValue);
                attachment.ContentType = contentType;
                insert attachment;
            }
            catch (DMLException e) {
                System.debug(LoggingLevel.INFO, '#### error occurred while adding attachment to case ' + e.getMessage());
            }
            finally
            {
                attachment = new Attachment(); 
            }
        }
        else
        {
            System.debug(LoggingLevel.INFO, '#### no attachment adding to case');
        }
        return null;
    }           
}

Answer 2

You create a div with a button and a span:

<div>
<input type="button" onclick="document.getElementById('fu').click()" 
value="Click to select file" />
<span id="fileName"></span>
</div>

And put the visible div just on your file upload named 'fu'

<input type="file" id="fu" onchange="FileSelected()" style="width: 0;">

and add this script:

function FileSelected(e)
{
    file = document.getElementById('fu').files[document.getElementById('fu').files.length - 1];
    document.getElementById('fileName').innerHtml= file.name;
}

And you have another useful things like file.type and file.size to show.

Answer 3

You may increase the width of .file > label { width: 113px; } and drop the opacity: 0; in .file > input[type="file"].

Answer 4

Instead of changing the text and default parameters of input element try to use a workaround.

<div class="file">
    <label for="file-input">Pick a file</label>
    <input type="file" id="file-input">
</div>

And design it via style:

.file { position: relative; height: 30px; width: 100px; }
.file > input[type="file"] { position: absoulte; opacity: 0; top: 0; left: 0; right: 0; bottom: 0 }
.file > label { position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: #666; color: #fff; line-height: 30px; text-align: center; cursor: pointer; }

Working Demo