How to programmatically trigger select file dialog box with JavaScript?

Spread the love

Sometimes, we want to programmatically trigger select file dialog box with JavaScript.

In this article, we’ll look at how to programmatically trigger select file dialog box with JavaScript.

How to programmatically trigger select file dialog box with JavaScript?

To programmatically trigger select file dialog box with JavaScript, we call the click method.

For instance, we write

<input id="myInput" type="file" style="visibility: hidden" />
<input
  type="button"
  value="Show Dialog"
  onclick="document.querySelector('#myInput').click();"
/>

to add a file input and a button.

Then we set the onclick attribute of the input to document.querySelector('#myInput').click(); to select the file input with querySelector when we click it.

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

Conclusion

To programmatically trigger select file dialog box with JavaScript, we call the click method.

Leave a Reply

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