How to change the button text of ?

Question

<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?

possible duplicate of [How to rename HTML "browse" button?](http://stackoverflow.com/questions/1163667/how-to-rename-html-browse-button) — Ciro Santilli OurBigBook.com, Nov 08 '14 at 08:57
There are pseudo elements like [`::file-selector-button`](https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button) now. Maybe these can be used somehow. — Sebastian Simon, Jan 13 '21 at 00:11

score 149 · Answer 1 · edited Oct 20 '15 at 12:46

149

Use Bootstrap FileStyle, which is used to style the file fields of forms. It is a plugin for a jQuery-based component library called Twitter Bootstrap

Sample usage:

Include:

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

Via JavaScript:

$(":file").filestyle();

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.">

edited Oct 20 '15 at 12:46

silver est

51
6

answered Sep 20 '13 at 04:57

Fernando Kosh

3,426
1
34
31

2

Doesn't seem to be working for me. It still shows the brorser's default buttons. Also, the demo at https://github.com/markusslima/bootstrap-filestyle.git doesn't work either - all examples show the default buttons. Am I missing something? – Ya. Jul 02 '15 at 16:07
8

@Tony Uhh.... what makes you think Bootstrap isn't using the "wacky hack" underneath as well? :-) – Andz Jul 03 '15 at 08:34
@Ya can you tell what browser and it version? Tested now on Chrome Version 43.0.2357.130 (64-bit) on Linux and all examples works perfectly. – Fernando Kosh Jul 06 '15 at 21:16
@Andz What underlying code does has no interest to me, as the presentation layer is semantically unobtrusive here. – Tony Jul 07 '15 at 11:10
66

Throwing a javascript library (with a plugin!) on such a small problem is an inelegant overkill. – MKaama Sep 12 '16 at 18:48
BFS disables the ability to drag/drop files onto the browse button. – Alex Dresko Jul 18 '17 at 20:39
5

Downvoted. It is not even an answer, only a workaround that needs an extra library. The answer should intend to change the rendering behaviour for browsers. – wdetac Jun 12 '18 at 02:58
1

Change data-buttonText to data-text :) Working now. – Fatih Erol Dec 10 '21 at 02:40

score 146 · Answer 2 · edited Sep 11 '16 at 23:15

146

Hide the file input. Create a new input to capture a click event and forward it to the hidden input:

<input type="button" id="loadFileXml" value="loadXml" onclick="document.getElementById('file').click();" />
<input type="file" style="display:none;" id="file" name="file"/>

edited Sep 11 '16 at 23:15

2540625

11,022
8
52
58

answered Mar 27 '16 at 13:58

MushyPeas

2,469
2
31
48

throwing in an HTA file with ie7 mode I had to remove the `;` at the end. – ATek Jul 20 '17 at 23:28
great, don't want to include bootstrap just to change two words of text, but how would you do it if the file-input was created dynamically? – asparism Dec 10 '17 at 01:06
@asparism use JavaScript to manipulate the DOM, hide it by setting it's style and use before() and add the new input element? – MushyPeas Dec 10 '17 at 13:39
Since I wasn't able to access the `uploadImgFile.change` handler when dynamically adding an event listener to the new button, I actually ended up using a label element with the for attribute set to the file input's id. – asparism Dec 11 '17 at 09:33
4

@MushyPeas it is the easiest way. tried to play with css but this solution is much faster and easier. thanks – Mara Jun 28 '18 at 19:33
This is the easiest way to tackle this issue. Just to add, we also need to have a label field to display the path of the selected file to the user. Update the label with the value of the input field on onChange event. Thanks for your help. – A N Jan 15 '19 at 22:22
It works perfectly for me, it's a cool hack tho :) Just one thing : doing it, when I choose a file and validate, the path to the file doesn't display after choosing -it did with the original input, a solution ? I'm working on it – Alexis MASSON Apr 12 '19 at 11:35
2

This was the easiest way for me, too! It also allowed me to STYLE the 'mock' file-button as one of a set of other form-button options - without having to worry about displaying the odd-looking "Browse" file-button. – Harry Mantheakis Sep 12 '19 at 17:00
Instead of using js to click the input, you can use a label and set its "for" attribute to the id of the input. – Amr Mar 11 '20 at 06:45
This works as well, but we do not get the look of a button and that's what a button does, you click them, something happens. But with a label nobody expects any action by clicking a label, if they even try it. – MushyPeas Mar 12 '20 at 08:17
Super.. even used the same style and exact words from real hidden button. The best solution so far. – Luis H Cabrejo Mar 28 '23 at 00:53

score 122 · Answer 3 · edited Jun 04 '15 at 14:10

122

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

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');
});

CAVEAT: In IE9 and IE10 if you trigger the onClick in a file input via javascript, the form will be flagged as 'dangerous' and cannot be submitted with javascript, not sure if it can be submitted traditionally.

edited Jun 04 '15 at 14:10

Charlie74

2,883
15
23

answered Dec 29 '11 at 11:58

ParPar

7,355
7
43
56

6

This is a clever solution. Couldn't you also do this with a – Code Commander Jul 23 '13 at 17:41
1

@Code Commander -Thanks, and yes, you can do it with every element you want, but the most common is the element. Just get rid of the button+text field of the "file input"... – ParPar Jul 24 '13 at 21:24
2

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 – newshorts May 24 '14 at 19:49
I am using ` – sohaiby May 11 '15 at 12:09
your solution doesnt work. You prolly didn't set border, margin, padding and background-color or or else it would be obvious – yan bellavance Mar 29 '18 at 03:37
Also in IE7 the form won't be submitted in this way. – Oana-Elena Danescu May 06 '20 at 09:11

score 50 · Answer 4 · answered Dec 22 '09 at 05:11

50

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.

answered Dec 22 '09 at 05:11

Pekka

442,112
142
972
1,088

6

Can you prove it that it can't be changed? – user198729 Dec 22 '09 at 05:12
1

Or by browsing the browsers' source codes, at least for the Open Source ones. – Pekka Dec 22 '09 at 05:15
This could by the answer (to another question, something like "Why is the content of value, 'VALUE="C:\someFile.txt"' for an input field of type file, 'TYPE="FILE"', ignored by the browser?"): http://stackoverflow.com/questions/1342039 – Peter Mortensen Jan 21 '10 at 15:47
Loving the oldschoolness of this answer :D – Jamie Hutber Mar 16 '23 at 12:50

Code Black · Answer 5 · 2015-12-08T05:47:58.847

35

Works Perfectly on All Browsers Hope it will work for you too.

HTML:
<input type="file" class="custom-file-input">

CSS:

 .custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10pt;
}
.custom-file-input:hover::before {
  border-color: black;
}
.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

Change content: 'Select some files'; with the text you want within ''

IF NOT WORKING WITH firefox then use this instead of input:

<label class="custom-file-input" for="Upload" >
</label>

<input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden">

edited Dec 08 '15 at 05:47

answered Oct 03 '15 at 06:32

Code Black

530
5
11

Works on Safari, though – Cullub Dec 05 '15 at 14:34
Its working perfectly at my end on my FF 41.0.2.You are running in to cross browser compatibility issue please refer to CSS BOX MODEL to minify the issue. – Code Black Dec 07 '15 at 17:23
[This jsfiddle](http://jsfiddle.net/e0t1swh8/) is not working for me on Firefox 42.0. On safari, it works. Can you confirm it works on FF 41.0.2? – Cullub Dec 07 '15 at 18:01
Not working for me on FF 41.0.2 (I downloaded a copy). Not working for FF42 on windows either. – Cullub Dec 07 '15 at 18:18
Or IE11 (not as much of a problem - I'm not trying to support IE anyway) – Cullub Dec 07 '15 at 18:25
1

The problem is probably that FF is built on Gecko, not webkit. (my best guess) – Cullub Dec 07 '15 at 18:28
2

Choose Some File – Code Black Dec 07 '15 at 18:32
Any way this can be a – Cullub Dec 07 '15 at 18:36
No it can't be as we are using it with input tags so input goes with legend. – Code Black Dec 07 '15 at 18:39
4

OK, Thanks! Check out [this JSFiddle](http://jsfiddle.net/61zLtzx6/2/). If you edit your answer with that, I think it's worthy of an upvote :) – Cullub Dec 07 '15 at 18:49
This answers the question exactly , without involving a library. I did have to fiddle with the length in both classes, but other than that, it works. Thanks. – greg Aug 21 '16 at 16:35

Ken Karlo · Answer 6 · 2018-11-01T05:28:23.183

35

Simply

<label class="btn btn-primary">
  <i class="fa fa-image"></i> Your text here<input type="file" style="display: none;"  name="image">
</label>

[Edit with snippet]

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<label class="btn btn-primary">
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">
</label>

edited Nov 01 '18 at 05:28

answered Oct 31 '18 at 04:59

Ken Karlo

466
4
5

1

I like your solution answer but, how do I change the label text after select a picture? – Ragnar Apr 28 '22 at 16:14

score 18 · Answer 7 · answered Dec 23 '17 at 07:05

18

I think this is what you want:

<button style="display:block;width:120px; height:30px;" onclick="document.getElementById('getFile').click()">Your text here</button>


<input type='file' id="getFile" style="display:none">

answered Dec 23 '17 at 07:05

Chit

293
2
12

This did the job.. Thanks – Marcel Kraan Jun 08 '22 at 09:35

score 13 · Answer 8 · answered Jun 26 '15 at 00:35

13

This is a JQuery plugin to change the button text of an input file element.

Example HTML:

<input type="file" id="choose-file" />

Example JS:

$('#choose-file').inputFileText({
    text: 'Select File'
});

Result:

plugin result

answered Jun 26 '15 at 00:35

datchung

3,778
1
28
29

Not a great solution for 'multiple' files. Does not show more than one file. – Benj Sanders Jan 03 '21 at 06:40

score 10 · Answer 9 · edited Jan 28 '16 at 12:29

<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" />
</div>

JS

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/

score 5 · Answer 10 · answered Sep 12 '16 at 18:37

Use `<label>` for the caption

<form enctype='multipart/form-data' action='/uploads.php' method=post>
<label for=b1>
    <u>Your</u> caption here
<input style='width:0px' type=file name=upfile id=b1
 onchange='optionalExtraProcessing(b1.files[0])'
 accept='image/png'>
</label>
</form>

This works without any javascript. You can decorate the label to any degree of complexity, to your heart's content. When you click on the label, the click automatically gets redirected to the file input. The file input itself can be made invisible by any method. If you want the label to appear like a button, there are many solutions, e.g.:

label u {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

score 5 · Answer 11 · answered Jul 14 '20 at 07:55

5

I know, nobody asked for it but if anybody is using bootstrap, it can be changed through Label and CSS Pseudo-selector.

For changing button text:

.custom-file-label::after {
  content: "What's up?";
}

For changing field text:

<label class="custom-file-label" for="upload">Drop it like it's hot</label>

Here's a fiddle.

answered Jul 14 '20 at 07:55

actuallyakash

113
1
8

1

This, with [this w3schools trick](https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp#:~:text=To%20create%20a%20custom%20file,%2Dfile%2Dinput%20to%20it.) worked very well for me. And since I'm using Bootstrap already, there was no need to install any other plugin. – Bazil Mar 07 '23 at 22:41

score 5 · Answer 12 · answered Sep 30 '21 at 20:48

In Addition to MushyPeas answer, you can add a label to show the filename like so (no jQuery needed):
Credits also to this answer.

<input type="button" id="click-input" value="Write anything" onclick="document.getElementById('file').click();" />
<label for="click-input" id="file-name">Bla bla</label>
<input type="file" style="display:none;" id="file">
<script>
    inputElement = document.getElementById('file')
    labelElement = document.getElementById('file-name')
    inputElement.onchange = function(event) {
        var path = inputElement.value;
        if (path) {
            labelElement.innerHTML = path.split(/(\\|\/)/g).pop()
        } else {
            labelElement.innerHTML = 'Bla bla'
        } 
    }
</script>

score 4 · Answer 13 · edited Nov 23 '21 at 20:38

Only CSS & bootstrap class

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="col-md-4 input-group">
  <input class="form-control" type="text" />
  <div class="input-group-btn">
    <label for="files" class="btn btn-default">browse</label>
    <input id="files" type="file" class="btn btn-default" style="visibility:hidden;" />
  </div>
</div>

score 4 · Answer 14 · edited Nov 23 '21 at 20:07

4

In Bootstrap +4.5 you can simply add this to your code:

.custom-file-input~.custom-file-label::after {
  content: "Your custom text ...";
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="custom-file">
  <input type="file" class="custom-file-input">
  <label class="custom-file-label">Your custom placeholder ...</label>
</div>

edited Nov 23 '21 at 20:07

isherwood

58,414
16
114
157

answered Aug 27 '20 at 23:01

Sajad Afaghiy

524
5
12

See this answer to display the file name of the selected file: https://stackoverflow.com/a/69398675/7335274 You will need to modify the IDs of the label and input in the JavaScript code. – fsbflavio Feb 27 '23 at 20:38

score 3 · Answer 15 · edited Dec 12 '14 at 10:49

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.

willy wonka · Answer 16 · 2022-09-02T14:17:54.020

What about icons without using real images and "interactivity"?

Check the following example that doesn't use any image, not even javascript, and also it is interactive in the sense that changes its look on mouse events as on mouse-over and on mouse left or right click.

input
{
  padding: 10px;
  width: 100%;
}

input::file-selector-button
{
  display: none;
}

input::before
{
  border: 1px solid red;
  border-radius: 3px 8px 3px 8px;
  color: red;
  content: attr(value)' Some more text';
  margin: 25px;
  padding: 5px;
}

input:hover:before
{
  border: 1px groove blue;
  background: lime;
}

input:active:before
{
  border: 1px groove blue;
  background: yellow;
}

<input type="file" value=" Open..." />

How it works:

Basically, it hides the main button of the standard file input element and shows its pseudo element, indicated by the :before part. Than it styles how it looks like and also some mouse events, so it is kind of "interactive".

Also using the :file-selector-button pseudo-element, allows to style the button it self or even to not display it at all as I have done int the above example with the code display: none;. This allows to use the :before element as replacement of the button.

The advantage of doing it with css is that by not using any javascript it will work even if the user's browser has javascript disabled.

About the folder icon:

Actually it is a char it self in UNICODE: that is U+1F4C2 code-point. To see it correctly the user of the page must have a font that supports it. I did not install any new font into my system (Win7) and I see it correctly: so I suppose it is correctly seen by everyone else.

score 2 · Answer 17 · edited Apr 14 '19 at 21:04

2

Here is a way to "change" the text of an input with file type, with pure HTML and javascript:

<input id='browse' type='file' style='width:0px'>
<button id='browser' onclick='browse.click()'>
    *The text you want*
</button>

edited Apr 14 '19 at 21:04

Wai Ha Lee

8,598
83
57
92

answered Apr 14 '19 at 20:44

IntelarX

131
1
4

score 1 · Answer 18 · edited Jan 28 '16 at 12:43

1

Before that <input type="file">, add an image and <input style="position:absolute"> it will occupy the space of <input type="file">

Use the following CSS to the file element

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

edited Jan 28 '16 at 12:43

Toby Speight

27,591
48
66
103

answered Jul 11 '13 at 05:58

Bibaswann Bandyopadhyay

3,389
2
31
30

score 1 · Answer 19 · answered Mar 07 '19 at 05:08

You can simply add some css trick. you don't need javascript or more input files and i keep existing value attribute. you need to add only css. you can try this solution.

.btn-file-upload{
     width: 187px;
     position:relative;
 }

.btn-file-upload:after{
    content:  attr(value);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;    
    width: 48%;
    background: #795548;
    color: white;
    border-radius: 2px;
    text-align: center;
    font-size: 12px;
    line-height: 2;
 }

<input type="file" class="btn-file-upload" value="Uploadfile" />

score 1 · Answer 20 · answered Apr 22 '19 at 09:04

for me it does not work the custom text with bootstrap-filestyle. It help with button decoration but text its weird to be changed, before get into wrestling with css i try the following :

$( document ).ready(function() {
   $('.buttonText').html('Seleccione ficheros');
});

bootstrap-filestyle render the component as span with a class named butonText, so when document load just change the text. easy right and it must work on all browsers.

cheers

score 0 · Answer 21 · answered Mar 20 '17 at 15:20

if you using rails and have problem apply it, I would like to add some tips from original answer posted by @Fernando Kosh

Download file zip and copy file bootstrap-filestyle.min.js ke folder app/assets/javascripts/
open your application.js and add this line below

//= require bootstrap-filestyle.min
open your coffee and add this line

$(":file").filestyle({buttonName: "btn-primary",buttonBefore: true,buttonText: " Your text here",icon: false});

score 0 · Answer 22 · answered Apr 06 '20 at 07:50

I did it like this for my project:

.btn-outlined.btn-primary {
  color: #000;
}
.btn-outlined.btn-primary:active, .btn-outlined.btn-positive:active, .btn-outlined.btn-negative:active {
  color:#000;
}
.btn-block {
  display: block;
  width: 100%;
  padding: 15px 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

<label for="fileUpload" class="btn btn-primary btn-block btn-outlined">Your text</label>
<input type="file" id="fileUpload"style="display: none;">

score -1 · Answer 23 · edited Mar 29 '18 at 03:48

-1

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"  />
</div>

edited Mar 29 '18 at 03:48

Kaiido

123,334
13
219
285

answered Jun 15 '13 at 04:49

jarimos

1
3

In Chrome 39 I see both the UPLOAD IMAGE text and the button. Perhaps chrome's handling of file inputs has changed since you posted this? – EricP Dec 23 '14 at 18:26
1

@yan-bellavance what are you doing? If you think an answer is incorrect or not helpful, downvote, but in no way deface it! – Kaiido Mar 29 '18 at 03:49

How to change the button text of ?

23 Answers23

Use `<label>` for the caption

What about icons without using real images and "interactivity"?

How it works:

About the folder icon:

Linked

Related

How to change the button text of ?

23 Answers23

Use <label> for the caption

What about icons without using real images and "interactivity"?

How it works:

About the folder icon:

Linked

Related

Use `<label>` for the caption