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

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

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

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

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

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:

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.

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>

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"/>_x000D_
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>_x000D_
_x000D_
<label class="btn btn-primary">_x000D_
<i class="fa fa-image"></i> Your text here<input type="file" style="display: none;" name="image">_x000D_
</label>

I did it like this for my project:

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

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

Only CSS & bootstrap class

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

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

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

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.

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

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

2. Use the following CSS to the file element

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

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

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

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

and your input:

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

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.

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.

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

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

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

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>