Programmatically Trigger "Select File" Dialog Box

Programmatically trigger select file dialog box

If you're looking to have your own button to upload a file instead of using <input type="file" />, you can do something like:

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

Note that I used visibility: hidden, instead of display: none. You cannot call the click event on a non-displayed file input.

How to open select file dialog via js?

Using jQuery

I would create a button and an invisible input like so:

<button id="button">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />

and add some jQuery to trigger it:

$('#button').on('click', function() {
    $('#file-input').trigger('click');
});

Using Vanilla JS

Same idea, without jQuery (credits to @Pascale):

<button onclick="document.getElementById('file-input').click();">Open</button>
<input id="file-input" type="file" name="name" style="display: none;" />

How to manually trigger click for Dropzone (open select file dialog)

by default dropzone only works on on element it self, and if you try to run trigger manually it wont work. the best way i could find after searching A LOT was this:

myDropzone.hiddenFileInput.click()

to find dropzone instant there are several ways:

1- by jquery: var myDropZone = $('.dropzone').get(0).dropzone; or var myDropZone = $("div#dropmehere").dropzone({...}); if you are using id to find your element

2- by Dropzone class itself: var myDropzone = Dropzone.forElement("div#dropmehere");

now you can

Open file dialog box in JavaScript

Here is a nice one

Fine Uploader demo

It is an <input type='file' /> control itself. But a div is placed over that and css styles are applied to get that feel. Opacity of the file control is set to 0 so that it appears that the dialog window is opened when clicking on the div.

---

Related Topics