Take the 2-minute tour ×
<input type="file" value="Browse" name="avatar" id="id_avatar" />

I tried to modify the value, but it's not working. How to customize the button text?

share|improve this question
Are you talking about the filename or the button text? –  Artelius Dec 22 '09 at 5:13
It's the button text –  user198729 Dec 22 '09 at 5:14
possible duplicate of How to rename HTML "browse" button? –  Ciro Santilli Nov 8 at 8:57

7 Answers 7

The "upload file..." text is pre-defined by the browser and can't be changed. The only way to get around this is to use a Flash- or Java-based upload component like swfupload.

share|improve this answer
Can you prove it that it can't be changed? –  user198729 Dec 22 '09 at 5:12
@OP It should be possible to find in the XHTML docs. –  jensgram Dec 22 '09 at 5:14
Or by browsing the browsers' source codes, at least for the Open Source ones. –  Pekka 웃 Dec 22 '09 at 5:15
Hey, where did the other answer go? It was much more elaborate. –  Pekka 웃 Dec 22 '09 at 5:25
@Asaph D: I am also interested in your answer! Do you have some kind of reference? E.g. to another question on Stack Overflow or some web page. –  Peter Mortensen Jan 21 '10 at 12:12

EDIT: I see now by the comments that you are asking about the button text, and not the file path. My bad. I'll leave my original answer below in case someone else who stumbles upon this question interprets it the way I originally did.

2nd EDIT: I had deleted this answer because I decided that I misunderstood the question and my answer was not relevant. However, comments in another answer indicated that people still wanted to see this answer so I'm undeleting it.

MY ORIGINAL ANSWER (I thought the OP was asking about the path, not the button text):

This is not a supported feature for security reasons. The Opera web browser used to support this but it was removed. Think about what would be possible if this were supported; You could make a page with a file upload input, pre-populate it with a path to some sensitive file and then auto-submit the form using javascript triggered by the onload event. This would happen too fast for the user to do anything about it.

share|improve this answer

You can put an image instead, and do it like this:


<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />


$("#upfile1").click(function () {

CAVEAT: In IE9 and IE10 if you trigger the onclick in a file input via javascript the form gets flagged as 'dangerous' and cannot be submmited with javascript, no sure if it can be submitted traditionaly.

share|improve this answer
This is a clever solution. Couldn't you also do this with a <button> element? –  Code Commander Jul 23 '13 at 17:41
@Code Commander -Thanks, and yes, you can do it with every element you want, but the most common is the <image> element. Just get rid of the button+text field of the "file input"... –  ParPar Jul 24 '13 at 21:24
Just a heads up to anyone using the above, some mobile browsers disable triggering file input clicks programmatically. Specifically, android 4 for the Galaxy S III –  newe1344 May 24 at 19:49

This is an alternative solution that may be of help to you. This hides the text that appears out of the button, mixing it with the background-color of the div. Then you can give the div a title you like.

<div style="padding:10px;font-weight:bolder; background-color:#446655;color: white;margin-top:10px;width:112px;overflow: hidden;">
     UPLOAD IMAGE <input style="width:100px;color:#446655;display: inline;" type="file"  />
share|improve this answer
In Chrome 39 I see both the UPLOAD IMAGE text and the <input> button. Perhaps chrome's handling of file inputs has changed since you posted this? –  JoeCoder Dec 23 at 18:26
  1. Before that input type=file, add an image and it will occupy the space of
  2. Use the following CSS to the file element

    position:relative; opacity:0; z-index:99;

I think this will help

share|improve this answer

Use Bootstrap FileStyle, a plugin for jquery-based component library could Twitter Bootstrap, used to style the file fields of the forms.

Sample usage:


<script type="text/javascript" src="js/bootstrap-filestyle.min.js"> </script>

Via JavaScript:


Via data attributes:

<input type="file" class="filestyle" data-classButton="btn btn-primary" data-input="false" data-classIcon="icon-plus" data-buttonText="Your label here.">
share|improve this answer
Amazing, thanks. This answer deserves more attention than the wacky <img/> hack. –  Tony Dec 18 '13 at 12:03
I think as @Tony said this is the best answer. It is very simple and more accurate –  lnanikian Apr 29 at 8:39
You deserve more +1 –  RaNdoM_PoWneD May 8 at 12:19
Thanks @RaNdoM_PoWneD, +lnanikian and +Tony. ;-) –  Fernando Kosh May 11 at 1:35
<input id="uploadFile" placeholder="Choose File" disabled="disabled" />
    <div class="fileUpload btn btn-primary">
        <span>Your name</span>
        <input id="uploadBtn" type="file" class="upload" />

    document.getElementById("uploadBtn").onchange = function () {
        document.getElementById("uploadFile").value = this.value;

more http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

share|improve this answer

Your Answer


