How to change the button text of <input type="file" />?

Asked 22/12, 2009 at 5:7 Answered 5/10, 2023 at 3:26

329

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

Grandchild answered 22/12, 2009 at 5:7 Comment(4)

Are you talking about the filename or the button text? – Dispraise 22/12, 2009 at 5:13

possible duplicate of How to rename HTML "browse" button? – Redheaded 8/11, 2014 at 8:57

There are pseudo elements like ::file-selector-button now. Maybe these can be used somehow. – Anisette 13/1, 2021 at 0:11

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

Parkerparkhurst answered 20/9, 2013 at 4:57 Comment(8)

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

@Tony Uhh.... what makes you think Bootstrap isn't using the "wacky <img/> hack" underneath as well? :-) – Huey 3/7, 2015 at 8: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. – Parkerparkhurst 6/7, 2015 at 21:16

@Huey What underlying code does has no interest to me, as the presentation layer is semantically unobtrusive here. – Tillandsia 7/7, 2015 at 11:10

Throwing a javascript library (with a plugin!) on such a small problem is an inelegant overkill. – Stansbury 12/9, 2016 at 18:48

BFS disables the ability to drag/drop files onto the browse button. – Rota 18/7, 2017 at 20:39

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. – Subfloor 12/6, 2018 at 2:58

Change data-buttonText to data-text :) Working now. – Spanking 10/12, 2021 at 2:40

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

Badly answered 27/3, 2016 at 13:58 Comment(11)

throwing in an HTA file with ie7 mode I had to remove the ; at the end. – Eclectic 20/7, 2017 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? – Rooseveltroost 10/12, 2017 at 1:6

@Rooseveltroost use JavaScript to manipulate the DOM, hide it by setting it's style and use before() and add the new input element? – Badly 10/12, 2017 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. – Rooseveltroost 11/12, 2017 at 9:33

@Badly it is the easiest way. tried to play with css but this solution is much faster and easier. thanks – Braunschweig 28/6, 2018 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. – Eller 15/1, 2019 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 – Adorl 12/4, 2019 at 11:35

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. – Sternum 12/9, 2019 at 17:0

Instead of using js to click the input, you can use a label and set its "for" attribute to the id of the input. – Arid 11/3, 2020 at 6: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. – Badly 12/3, 2020 at 8:17

Super.. even used the same style and exact words from real hidden button. The best solution so far. – Maltz 28/3, 2023 at 0:53

123

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.

Neoclassicism answered 29/12, 2011 at 11:58 Comment(6)

This is a clever solution. Couldn't you also do this with a <button> element? – Syllabi 23/7, 2013 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"... – Neoclassicism 24/7, 2013 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 – Rimple 24/5, 2014 at 19:49

I am using <input type="file" inside asp.net gridview row, whose rows can be added dynamically.. so it will be a real pain in the head to call the relevant input click trigger (of the same row) while clicking on an image! :/ – Farmergeneral 11/5, 2015 at 12:9

your solution doesnt work. You prolly didn't set border, margin, padding and background-color or or else it would be obvious – Shorts 29/3, 2018 at 3:37

Also in IE7 the form won't be submitted in this way. – Friel 6/5, 2020 at 9:11

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.

Brantbrantford answered 22/12, 2009 at 5:11 Comment(4)

Can you prove it that it can't be changed? – Grandchild 22/12, 2009 at 5:12

Or by browsing the browsers' source codes, at least for the Open Source ones. – Brantbrantford 22/12, 2009 at 5: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?"): stackoverflow.com/questions/1342039 – Graybeard 21/1, 2010 at 15:47

Loving the oldschoolness of this answer :D – Flanagan 16/3, 2023 at 12:50

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

Hudgens answered 3/10, 2015 at 6:32 Comment(11)

Works on Safari, though – Mountbatten 5/12, 2015 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. – Hudgens 7/12, 2015 at 17:23

This jsfiddle is not working for me on Firefox 42.0. On safari, it works. Can you confirm it works on FF 41.0.2? – Mountbatten 7/12, 2015 at 18:1

Not working for me on FF 41.0.2 (I downloaded a copy). Not working for FF42 on windows either. – Mountbatten 7/12, 2015 at 18:18

Or IE11 (not as much of a problem - I'm not trying to support IE anyway) – Mountbatten 7/12, 2015 at 18:25

The problem is probably that FF is built on Gecko, not webkit. (my best guess) – Mountbatten 7/12, 2015 at 18:28

<label id="addButton" for="Upload" style="background-color: #000; color:#fff; padding:4px; border-radius:4px; font-family:monospace;" >Choose Some File </label> <input id="Upload" type="file" multiple="multiple" name="_photos" accept="image/*" style="visibility: hidden"> – Hudgens 7/12, 2015 at 18:32

Any way this can be a <button> instead of a label? – Mountbatten 7/12, 2015 at 18:36

No it can't be as we are using it with input tags so input goes with legend. – Hudgens 7/12, 2015 at 18:39

OK, Thanks! Check out this JSFiddle. If you edit your answer with that, I think it's worthy of an upvote :) – Mountbatten 7/12, 2015 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. – Counterirritant 21/8, 2016 at 16: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>

Galloway answered 31/10, 2018 at 4:59 Comment(1)

I like your solution answer but, how do I change the label text after select a picture? – Hendrickson 28/4, 2022 at 16:14

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

Upend answered 23/12, 2017 at 7:5 Comment(1)

This did the job.. Thanks – Kaolin 8/6, 2022 at 9:35

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

Endomorphism answered 26/6, 2015 at 0:35 Comment(1)

Not a great solution for 'multiple' files. Does not show more than one file. – Spreadeagle 3/1, 2021 at 6:40

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

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/

Warr answered 11/12, 2014 at 10:49 Comment(0)

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

Stansbury answered 12/9, 2016 at 18:37 Comment(0)

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.

Pabulum answered 14/7, 2020 at 7:55 Comment(1)

This, with this w3schools trick worked very well for me. And since I'm using Bootstrap already, there was no need to install any other plugin. – Shabbir 7/3, 2023 at 22:41

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>

Comintern answered 30/9, 2021 at 20:48 Comment(0)

Only CSS & bootstrap class

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Maxia answered 8/8, 2018 at 8:58 Comment(0)

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/[email protected]/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>

Cringe answered 27/8, 2020 at 23:1 Comment(1)

See this answer to display the file name of the selected file: https://mcmap.net/q/49321/-how-to-change-the-button-text-of-lt-input-type-quot-file-quot-gt You will need to modify the IDs of the label and input in the JavaScript code. – Timberhead 27/2, 2023 at 20:38

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.

Anemometer answered 22/12, 2009 at 5:11 Comment(0)

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.

Arleyne answered 2/9, 2022 at 14:10 Comment(0)

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>

Bloodstream answered 14/4, 2019 at 20:44 Comment(0)

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;

Leffert answered 11/7, 2013 at 5:58 Comment(0)

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

Photooffset answered 7/3, 2019 at 5:8 Comment(0)

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

Jubilate answered 22/4, 2019 at 9:4 Comment(0)

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

Ebner answered 20/3, 2017 at 15:20 Comment(0)

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

Billbug answered 6/4, 2020 at 7:50 Comment(0)

Extending Ken Karlo's solution to answer Ragnar's question .

For react I am changing the text via useState like this:

import { FC, useState } from 'react'
import classNames from 'classnames' // classNames to organize the classes.
import { ComponentPropsWithRef } from 'react'

type Props = ComponentPropsWithRef<'input'>

const UIPanel: FC<Props> = (props) => {
  const [files, setFiles] = useState<any[]>([])

  const handleFileChange = (event: any) => {
    let cfiles:any[] = event.target.files
    setFiles(files => cfiles)
  }

  let displayText = "Whatever text you want"
  return (
    <>
      <label class="btn btn-primary">
        <span>
        {displayText}  <span style="color:darkgrey" >{files && files.length > 0 ? (files?.length) + " files":"No file chosen"}</span>
        </span>
        <input onChange={(e) => handleFileChange(e)}
                type="file"
                buttonSize="small"
                displayText="Choose Locales Folder"
                files={files}
                webkitdirectory=""
                directory=""
                multiple
                className={classNames('hidden')}
        />
      </label>
    </>
  )
}

I am changging the only files.length part to mimic the original one, similarly you can change displayText variable to change the instruction text on the button as well.

PS: My usecase is uploading a folder which is why you see webkitdirectory,directory,multiple, if yours is single file you can change accordingly.

Tyus answered 5/10, 2023 at 3:26 Comment(0)

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

Roseroseann answered 15/6, 2013 at 4:49 Comment(2)

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? – Factional 23/12, 2014 at 18:26

@yan-bellavance what are you doing? If you think an answer is incorrect or not helpful, downvote, but in no way deface it! – Albite 29/3, 2018 at 3:49

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Use <label> for the caption

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

How it works:

About the folder icon:

Recommended topics

Hot tags

Use `<label>` for the caption