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.

Prevost

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... – Exploiter

Answer 1

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();

Exploiter

Can you create a jsfiddle ? Much easier to help you (or any other accessible URL) – Exploiter

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. jsfiddle.net/zbqk7a7z/3 – Exploiter

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 – Prevost

Mark as complete if everything is ok ;) – Exploiter

Answer 2

As described in issue #180

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

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

Protohuman

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); – Ninepins

after spending a day, finally found a working answer – Aylsworth

Answer 3

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

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

Guanaco

Answer 4

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;
};

Adventitious

Answer 5

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;
}

Stylographic