Get Dropzone Instance/Object using jQuery

Question

I use jQuery to work with dropzone. e.g.

$("#mydropzone").dropzone({ /*options*/ });

I need to get the Dropzone instance so I can call this method:

myDropzone.processQueue()

How can I achieve this? Is it possible?

in other words, how can I initialise drop zone using

$("#mydropzone").dropzone({ url: "/file/post" });

but at the same time get the instance of the object as if i initialise it using:

var myDropzone = new Dropzone("#mydropzone", { url: "/file/post"});

so I may call:

myDropzone.processQueue()

Thank you very much.

You can see the jquery part in dropzone source : if (typeof jQuery !== "undefined" && jQuery !== null) { jQuery.fn.dropzone = function(options) { return this.each(function() { return new Dropzone(this, options); }); }; } jQuery is build for easy chaining scripting, not for what you want, but dropzone maybe store the create object (prototype) onto the given element. Just console.dir("your element") and check the list for the dropzone... The code is too much big too check manualy... — Jordan, Apr 08 '15 at 14:53

score 79 · Answer 1 · answered Jul 10 '15 at 21:53

79

As described in issue #180

You can also use the built in Dropzone.forElement function.

var myDropzone = Dropzone.forElement("#mydropzone");

answered Jul 10 '15 at 21:53

cweston

11,297
19
82
107

This is the correct answer but needs an extra step because, as it is, the result is a jQuery object instead of the Dropzone object, so you really can't do anything with it unless you use it like `var myDropzone = Dropzone.forElement("#mydropzone").get(0);` – Stefan Gabos Jun 29 '19 at 11:47
after spending a day, finally found a working answer – Sayed Uz Zaman Apr 12 '20 at 03:57

score 19 · Accepted Answer · answered Apr 08 '15 at 15:04

19

The script seems to add a dropzone object to the given element. So you can do something like this :

var $dropZone = $("#mydropzone").dropzone({ /*options*/ });
// ...
$dropZone[0].dropzone.processQueue();

answered Apr 08 '15 at 15:04

Jordan

3,776
3
22
28

Can you create a jsfiddle ? Much easier to help you (or any other accessible URL) – Jordan Apr 08 '15 at 15:47
Ok, the dependicy don't seems to load, I added dropzone.js directly into fiddle (so scroll down to see the code). I confirm that dropzone add "dropzone" object to the element, where you can call the processQueue() I added a console.log() the dropzone object attached to the element. https://jsfiddle.net/zbqk7a7z/3/ – Jordan Apr 09 '15 at 09:08
You are right...I was doing it the wrong way... e.g. //console.log(mydrop.dropzone()); //wrong way //console.log(mydrop.dropzone); //wrong way.... Thank you very much – preston Apr 09 '15 at 09:41
Mark as complete if everything is ok ;) – Jordan Apr 09 '15 at 13:04

score 8 · Answer 3 · answered Apr 10 '18 at 07:46

8

Easy way to access the Instance with jQuery, if it has already been initialized:

var dropzone = $(this).get(0).dropzone;

answered Apr 10 '18 at 07:46

Fabian von Ellerts

4,763
40
35

Luca Reghellin · Answer 4 · 2018-07-09T16:19:36.357

As stated before, you can use dropzone's forElement, which in turn just checks for element.dropzone, where 'element' is the native one (not jquery obj). So, to merge, summarize, explain and expand the previous answers, you can do like this:

var element = $("#mydropzone")[0]; // this is the way jquery gives you the original dom

or better, in just plain js:

var element = document.querySelector("#mydropzone");

then get the dropzone like this:

element.dropzone

Or, more concise (plain js here):

var dzone = document.querySelector("#mydropzone").dropzone

Just for reference, the current dropzone's forElement source:

Dropzone.forElement = function (element) {
  if (typeof element === "string") {
    element = document.querySelector(element);
  }
  if ((element != null ? element.dropzone : undefined) == null) {
    throw new Error("No Dropzone found for given element. This is probably because you're trying to access it before Dropzone had the time to initialize. Use the `init` option to setup any additional observers on your Dropzone.");
  }
  return element.dropzone;
};

score 1 · Answer 5 · answered May 11 '19 at 08:03

it's seem simple with Dropzone.instances check with id of element:

function fn_check_has_dropzone_instances(id){
    var found = false;
    Dropzone.instances.forEach(function(item,index){
        if($($(item)[0].element).attr('id').trim()==id.trim()){
            console.log(id);
            found = true;
        }
    });
    return found;
}

Get Dropzone Instance/Object using jQuery

5 Answers5