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.
