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.