Sometimes, we want to change the button text of a file input with HTML and JavaScript.
In this article, we’ll look at how to change the button text of a file input with HTML and JavaScript.
How to change the button text of a file input with HTML and JavaScript?
To change the button text of a file input with HTML and JavaScript, we hide the file input button and add another button to open the file selection dialog.
For instance, we write
<input
type="button"
id="loadFileXml"
value="loadXml"
onclick="document.getElementById('file').click();"
/>
<input type="file" style="display: none" id="file" name="file" />
to add a hidden file input with
<input type="file" style="display: none" id="file" name="file" />
Then we add another button that has the onclick attribute set to document.getElementById('file').click();.
We select the file input with getElementById.
Then we call click on it to open the file selection dialog.
Conclusion
To change the button text of a file input with HTML and JavaScript, we hide the file input button and add another button to open the file selection dialog.
