How to show only the button with file input in HTML and JavaScript?

Spread the love

Sometimes, we want to show only the button with file input in HTML and JavaScript.

In this article, we’ll look at how to show only the button with file input in HTML and JavaScript.

How to show only the button with file input in HTML and JavaScript?

To show only the button with file input in HTML and JavaScript, we hide the file input and add another button to open the file selection dialog.

For instance, we write

<input
  type="button"
  value="Choose image"
  onclick="javascript:document.getElementById('imagefile').click();"
/>
<input id="imagefile" type="file" style="visibility: hidden" name="img" />

to add an input that clicks on the file input with document.getElementById('imagefile').click() when we click on it.

We hide the file input with visibility: hidden.

Conclusion

To show only the button with file input in HTML and JavaScript, we hide the file input and add another button to open the file selection dialog.

Leave a Reply

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