A JavaScript function which lets you customize the browse button and its selection text. It is known that the browse button <input type=file> is not directly customizable. This function simply emulates this button using an ordinary input button as a trigger.

Use your CLI and enter the following to clone:
git clone https://github.com/thielicious/selectFile.js.git

Create an object :

var getFile = new selectFile;
getFile.targets('choose','selected');

And then embed it in a form like this:

<form>
  <input type=file hidden id=choose>
  <input type=button onClick=getFile.simulate() value="Get File">
  <label id=selected>Nothing selected</label><br>
  <input type=submit value=Upload>
</form>

That is all. You may change the text in the label and give them some style.

prototype.targets(trigger, filetext)

• Parameter 1 defines the ID element that triggers the browse file button
  
• Parameter 2 defines the ID element that displays the selected file

prototype.simulate()

• Simulates the button click

🆕 A Demo has been added.

thielicious.github.io