46

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

<input type=file name=browse >
Ciro Santilli OurBigBook.com
  • 347,512
  • 102
  • 1,199
  • 985
coderex
  • 27,225
  • 45
  • 116
  • 170
  • 1
    Possible duplicate of [How to change the button text of ?](http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file) – Alex Feb 08 '16 at 15:15

10 Answers10

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/

Sameer Alibhai
  • 3,092
  • 4
  • 36
  • 36
Payam Shoeibi
  • 321
  • 3
  • 3
  • 1
    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!!! – Claudio Jan 19 '12 at 23:55
  • opcaity isn't supported by older browsers, so be careful with that. – Cobra_Fast Nov 19 '12 at 15:14
  • 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 `` but in the script? – Claudio Dec 23 '12 at 05:36
  • I would say that the input text should be disabled="true" also, if not when user click on it will see a pointer. – Chris Gomez Sep 16 '15 at 18:52
25

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.

Chuck
  • 234,037
  • 30
  • 302
  • 389
11
  1. Wrap the <input type="file"> with a <label> tag;
  2. Add a tag (with the text that you need) inside the label, like a <span> or <a>;
  3. Make this tag look like a button;
  4. Make input[type="file"] invisible via display: none.
fenceop
  • 1,439
  • 3
  • 18
  • 29
Pavel
  • 361
  • 3
  • 4
  • this works in chrome but i didn't test it in other browsers. – EKanadily Apr 24 '20 at 15:52
  • 1
    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. – EKanadily Apr 24 '20 at 16:19
7

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
korona
  • 2,308
  • 1
  • 22
  • 37
  • This will be completely unusable if JS is not available. (The HTML is invalid too). – Quentin Jul 22 '09 at 08:50
  • @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. – korona Jul 22 '09 at 09:13
  • 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. – Quentin Jul 22 '09 at 13:22
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

Thielicious
  • 4,122
  • 2
  • 25
  • 35
3

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>
IntelarX
  • 131
  • 1
  • 4
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).

FWH
  • 3,205
  • 1
  • 22
  • 17
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

PeterMmm
  • 24,152
  • 13
  • 73
  • 111
0

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

Canavar
  • 47,715
  • 17
  • 91
  • 122
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

dande
  • 233
  • 2
  • 11