Sometimes, we want to show only button with file input.
In this article, we’ll look at how to show only button with file input.
How show only button with file input?
To show only button with file input, we can hide the file input and call click on it when we click on the button.
For instance, we write
<input type="file" id="selectedFile" style="display: none" />
<input id="button" type="button" value="Browse..." />
to add the file input and the button.
We hide the file input with
style="display: none"
Then we can use it with
document.getElementById("button").onclick = () => {
document.getElementById("selectedFile").click();
};
to select the button with
document.getElementById("button")
And then we set its onclick property to a function that clicks the file input with
document.getElementById("selectedFile").click();
to open it.
Conclusion
To show only button with file input, we can hide the file input and call click on it when we click on the button.
