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.