Change file input button's Text when the user chooses his/her file

Question

I have this file input:

<input id="some_file_input" type="file"  name="some_file" class="custom-input-thing" data-buttonName="btn-primary" data-icon="true">

i hide the text that comes with the button, the one that says "no file selected", just becouse of the "looks":

input[type=file] {
color: transparent; 
display: block;

}

Is there a way to change the text of the file input when the user selects the file to upload??

Thanks in advance for any help.

http://stackoverflow.com/questions/1944267/how-to-change-the-button-text-of-input-type-file — Popnoodles, Sep 22 '15 at 16:25
@Popnoodles is not the same question. Mine is asking to check when the user selects the file and THEN chenge the text property — NachoMiguel, Sep 22 '15 at 16:27

score 1 · Accepted Answer · answered Sep 22 '15 at 16:26

Use the inputFileText plugin for this

https://github.com/datchung/jquery.inputFileText

Load this file after jQuery

<script src='jquery-input-file-text.js'></script>

Here is your jQuery code.

$("input[type=file]").on("change", function() {
    $(this).inputFileText( { text: 'Uploaded' } );
});

If a file is updated, the value of input[type=file] will be changed. We use the change event handler. Then we include the plugin function for changing the text.

Change file input button's Text when the user chooses his/her file

1 Answers1