How to programmatically trigger the “select file” dialog box with JavaScript?

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

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 input.

Then we call document.querySelector to select the hidden file input.

We call click to open the select file dialog.

We set the onclick attribute to the code to open the select file dialog to open it on click.