Stack Overflow

• Questions
• Tags
• Tour
• Users
• Ask Question
How to change the button text of <input type=“file” />?
veuopt

<input  type="file"  value="Browse"  name="avatar"  id="id_avatar"  />

20 deow
votn
aevftoir
I tried to modify the value, but it's not working. How to customize the button text?
2

html input
share|improve this question edited Jan 21 '10 at 12:10 asked Dec 22 '09 at 5:07

BalusC user198729
400k638471153 6,54125102200
Are you talking about the filename or the button text? – Artelius Dec 22 '09 at 5:13

2 It's the button text – user198729 Dec 22 '09 at 5:14

6 Answers
active
oldest

votes
evu
op
t

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

share|improve this answer

e
d
o
w
vtn

answered Dec 22 '09 at 5:11

Pekka 웃
206k38357584
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

I removed it because I thought I misunderstood the question. I'll add it back so you can look at it again. –
Asaph Dec 22 '09 at 5:26
show 5 more comments
evu
op
t

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

7
e
d
o
w
vtn
HTML:

<img  src="/images/uploadButton.png"  id="upfile1"  style="cursor:pointer"  />

<input  type="file"  id="file1"    name="file1"  style="display:none"  />
JQuery:

$("#upfile1").click(function  ()  {
       $("#file1").trigger('click');
});
In IE9 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 edited Nov 7 '12 at 12:14 answered Dec 29 '11 at 11:58

Andy ParPar
7,7261841 869515

evu
op
t

You can change it with a good shot of CSS/JS. This is discussed here and there fairly a lot. The one
4 atquirksmode.org is a good article.

share|improve this answer

e
d
o
w
vtn

answered Jan 21 '10 at 12:13

BalusC
400k638471153

evu
op
t

EDIT: I see now by the comments that you are asking about the button text, and not the file path.
3 My bad. I'll leave my original answer below in case someone else who stumbles upon this question
e
d
o
w
vtn
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 edited Dec 22 '09 at 5:28 answered Dec 22 '09 at 5:11

Asaph
41.6k460100
evu
op
t

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

<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"    />
</div>
share|improve this answer edited Jun 16 at 23:13 answered Jun 15 at 4:49

Andrew Barber♦ jarimos

22.9k83471 92

evu
op
t

This code
0
e
d
o
w
vtn
<img  src="/images/uploadButton.png"  id="upfile1"  style="cursor:pointer"  />  
<input  type="file"  id="file1"  name="file1"  style="display:none"  />

does not work for me because I want to use the Directory upload with attribute

webkitdirectory
Is there the possibility to use an individual Browse-Button for this ? Just asking, maybe the drag and
drop solution is better without Browse-button

share|improve this answer answered Jun 19 at 18:48

Timo
239