How to rename HTML "browse" button of an input type=file?

Question

How to rename the browse button as "Select the file"? E.g.:

<input type=file name=browse >

Possible duplicate of How to change the button text of <input type="file" />? — Alex
– Alex, Commented Feb 8, 2016 at 15:15

Sameer Alibhai · Accepted Answer · 2014-07-31 20:31:38Z

32

<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
{
    var fileinput = document.getElementById("browse");
    fileinput.click();
}
function Handlechange()
{
var fileinput = document.getElementById("browse");
var textinput = document.getElementById("filename");
textinput.value = fileinput.value;
}
</script>

<input type="file" id="browse" name="fileupload" style="display: none" onChange="Handlechange();"/>
<input type="text" id="filename" readonly="true"/>
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/>

http://jsfiddle.net/J8ekg/

edited Jul 31, 2014 at 20:31

Sameer Alibhai

3,1984 gold badges37 silver badges36 bronze badges

answered May 11, 2011 at 15:42

Payam Shoeibi

3213 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Claudio Over a year ago

I used this approach and really feel comfortable with it. But there is a main thing to change: if you apply display: none to that input, the click doesn't work, so better go with opacity: 0;. Thanks!!!

Cobra_Fast Over a year ago

opcaity isn't supported by older browsers, so be careful with that.

Claudio Over a year ago

I now wonder what would happen if I want to send another variable, let's call it group_id. How should I send it? in the HTML <input type="hidden" class="hide" id="group_id" name="group_id" value="2" /> but in the script?

Chris Gomez Over a year ago

I would say that the input text should be disabled="true" also, if not when user click on it will see a pointer.

Chuck · Accepted Answer · 2009-07-22 07:50:39Z

24

The button isn't called the "browse button" — that's just the name your browser gives for it. Browsers are free to implement the file upload control however they like. In Safari, for example, it's called "Choose File" and it's on the opposite side of whatever you're probably using.

You can implement a custom look for the upload control using the technique outlined on QuirksMode, but that goes beyond just changing the button's text.

answered Jul 22, 2009 at 7:50

Chuck

238k31 gold badges306 silver badges392 bronze badges

Comments

fenceop · Accepted Answer · 2016-10-27 20:59:56Z

12

Wrap the <input type="file"> with a <label> tag;
Add a tag (with the text that you need) inside the label, like a <span> or <a>;
Make this tag look like a button;
Make input[type="file"] invisible via display: none.

edited Oct 27, 2016 at 20:59

fenceop

1,5273 gold badges19 silver badges30 bronze badges

answered Jul 3, 2016 at 8:18

Pavel

3813 silver badges4 bronze badges

2 Comments

EKanadily Over a year ago

this works in chrome but i didn't test it in other browsers.

EKanadily Over a year ago

i tested it some more : it works in chrome foxfire ,IE and edge in desktop . it also works in my iPad's safari and chrome, it work in my android phone Firefox.

Peter Mortensen · Accepted Answer · 2010-01-21 19:43:12Z

8

A bit of JavaScript will take care of it:

<script language="JavaScript" type="text/javascript">
function HandleBrowseClick()
{
    var fileinput = document.getElementById("browse");
    fileinput.click();
    var textinput = document.getElementById("filename");
    textinput.value = fileinput.value;
}
</script>

<input type="file" id="browse" name="fileupload" style="display: none"/>
<input type="text" id="filename" readonly="true"/>
<input type="button" value="Click to select file" id="fakeBrowse" onclick="HandleBrowseClick();"/>

Not the nicest looking solution, but it works.

edited Jan 21, 2010 at 19:43

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jul 22, 2009 at 7:54

korona

2,2501 gold badge22 silver badges38 bronze badges

3 Comments

Quentin Over a year ago

This will be completely unusable if JS is not available. (The HTML is invalid too).

korona Over a year ago

@David Dorwad: Thanks for pointing out the obvious (that JS doesn't work when JS is not available). The real-world case were this would happen is extremely rare though. Also, I didn't intend for anyone to blindly copy and paste this and use it straight away, it was intended as a pointer to show one possible way of achieving the goal at hand. But hey, thanks for deterring me from posting again.

Quentin Over a year ago

The point is that the HTML doesn't work if the JS is not available. A decently written solution would degrade gracefully and not fall back to a position where there was a button which did nothing.

IntelarX · Accepted Answer · 2019-04-14 20:42:59Z

4

Here is the best, simple, short and clean way to "rename" the text of an input with file type and without JQuery, 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, 2019 at 20:42

answered Apr 14, 2019 at 19:50

IntelarX

1411 silver badge4 bronze badges

Comments

Thielicious · Accepted Answer · 2017-10-24 11:06:26Z

3

You can do it with a simple css/jq workaround: Create a fake button which triggers the browse button that is hidden.

HTML

<input type="file"/>
<button>Open</button>

CSS

input { display: none }

jQuery

$( 'button' ).click( function(e) {
    e.preventDefault(); // prevents submitting
    $( 'input' ).trigger( 'click' );
} );

demo

edited Oct 24, 2017 at 11:06

answered May 21, 2016 at 16:11

Thielicious

4,4822 gold badges31 silver badges39 bronze badges

1 Comment

Mihai Over a year ago

Here make sure the button is type="button" or it will submit the form.

FWH · Accepted Answer · 2009-07-22 07:47:44Z

2

The input type="file" field is very tricky because it behaves differently on every browser, it can't be styled, or can be styled a little, depending on the browser again; and it is difficult to resize (depending on the browser again, it may have a minimal size that can't be overwritten).

There are workarounds though. The best one is in my opinion this one (the result is here).

answered Jul 22, 2009 at 7:47

FWH

3,2332 gold badges24 silver badges17 bronze badges

Comments

PeterMmm · Accepted Answer · 2009-07-22 07:49:04Z

1

AFAIK you cannot change the button text, it is hard coded in the browsers.

But there are several workarounds to put a button with diferent text/image on a form:

link

answered Jul 22, 2009 at 7:49

PeterMmm

24.7k15 gold badges77 silver badges115 bronze badges

Comments

Canavar · Accepted Answer · 2009-07-22 07:48:06Z

0

No, you can't change file upload input's text. But there are some tricks to overlay an image over the button.

answered Jul 22, 2009 at 7:48

Canavar

48.1k17 gold badges94 silver badges126 bronze badges

Comments

dande · Accepted Answer · 2009-07-22 07:54:04Z

0

You can also use Uploadify, which is a great jQuery upload plugin, it let's you upload multiple files, and also style the file fields easily. http://www.uploadify.com

answered Jul 22, 2009 at 7:54

dande

2333 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to rename HTML "browse" button of an input type=file?

10 Answers 10

4 Comments

Comments

2 Comments

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

4 Comments

Comments

2 Comments

3 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related