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

Question

Dropzone only works on the element itself i have an SPAN tag inside my button, and when i click on the text it won't trigger click on parent element which dropzone is attached to. i tried the following but it doesn't work!

$('.dropzone').click();

and also this

$('.dropzone').trigger('click');

score 23 · Accepted Answer · answered Mar 09 '18 at 15:54

23

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

answered Mar 09 '18 at 15:54

Pezhvak

9,633
7
29
39

1

Thank you. It is also helpful to know that you don't need jquery to access any dropzone element. You can simply get the element like this too: `var myDropZone = document.getElementById("dropzone-id").dropzone`, although jquery works too – ashutosh Jul 15 '20 at 17:50
1

For this to work you must pass `clickable: true` or pass an element. Otherwise, the Dropzone has no `hiddenFileInput`. – evolross Aug 05 '20 at 20:50
Seems to be broken on firefox v.101 picker was blocked due to lack of user activation. – Daphoque Jun 09 '22 at 09:32
@Daphoque did you fix it? – Pezhvak Jun 09 '22 at 15:50
@Pezhvak it seems more related to a firefox issue, the snapped version of firefox v101 on ubuntu 22.04 blocked the action ; but it works with the firefox v01 binaries downloaded on mozilla website. – Daphoque Jun 13 '22 at 14:00

score 3 · Answer 2 · answered Dec 10 '19 at 08:34

3

While using vue dropzone you can simply open file dialog using below line.

document.getElementsByClassName("dropzone")[0].click();

answered Dec 10 '19 at 08:34

Riddhi

2,174
1
9
17

score 2 · Answer 3 · answered Jul 13 '20 at 06:22

Quite late to the party here, but if you're looking for a solution for vue2-dropzone, (the vue wrapper for Dropzone.js), you can give the dropzone a reference (e.g <vue-dropzone ref=dropzone />), then call $refs.dropzone.$el.click() to trigger the file upload dialog.

score 0 · Answer 4 · answered Feb 27 '19 at 12:56

0

The following worked for me $('#dropzone_dropzone').get(0).dropzone.hiddenFileInput.click();

where #dropzone_dropzone is the name of my DIV

answered Feb 27 '19 at 12:56

Julius Simon

46
4

score 0 · Answer 5 · answered Jul 09 '21 at 17:36

0

Check out this solution , it works fine. if your're using Angular you can proceed as follows

  @ViewChild(DropzoneDirective) dropzoneRef: DropzoneDirective;

in your method

this.dropzoneRef.dropzone().clickableElements[0].click();

answered Jul 09 '21 at 17:36

Smaillns

2,540
1
28
40

score 0 · Answer 6 · answered Jul 19 '21 at 16:45

0

In version 5.7.2, all of the the following worked for me:

$("#dropzone")[0].click()
$("#dropzone").get(0).click()
document.getElementById("dropzone").click();

answered Jul 19 '21 at 16:45

infografnet

3,749
1
35
35

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

6 Answers6