How to change default text in input type=”file” with HTML and JavaScript?

Spread the love

Sometimes, we want to change default text in input type="file" with HTML and JavaScript.

In this article, we’ll look at how to change default text in input type="file" with HTML and JavaScript.

How to change default text in input type="file" with HTML and JavaScript?

To change default text in input type="file" with HTML and JavaScript, we hide the file input and we add another button with the text we want.

For instance, we write

<button style="cursor: pointer" id="btn">Click me</button>
<input type="file" id="input" style="display: none" />

to add the button and the file input.

Then we write

document.getElementById("btn").addEventListener("click", () => {
  document.getElementById("input").click();
});

to select the button with getElementById.

We add a click listener for it with addEventListener.

In the click listener, we write document.getElementById("input") to select the file input.

And then we call click on it to open the file selection dialog.

Conclusion

To change default text in input type="file" with HTML and JavaScript, we hide the file input and we add another button with the text we want.

Leave a Reply

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