How to change the button text of a file input with HTML and JavaScript?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *