Multiple Dropzone In A Single Page

I'm using Dropzone without creating a dropzone form. It works great for me in this way. But in this case I can not create another instance of Dropzone in my page. var myDropzone1 =

Solution 1:

It's possible, but you can't bind a second dropdzone on the same element, as you did. 2 Dropzones on one element makes no sense. 2x document.body in your solution atm. Try this...

HTML:

<form action="/file-upload" class="dropzone"id="a-form-element"></form>
<form action="/file-upload" class="dropzone"id="an-other-form-element"></form>

JavaScript:

var myDropzoneTheFirst = new Dropzone(
        //id of drop zone element 1'#a-form-element', { 
            url : "uploadUrl/1"
        }
    );

var myDropzoneTheSecond = new Dropzone(
        //id of drop zone element 2'#an-other-form-element', { 
            url : "uploadUrl/2"
        }
    );

Solution 2:

I want to add something here because I have experienced problems with multiple dropzones on the same page.

In your init code you must remember to include var if putting a reference otherwise it isn't dealing with this instance of the dropzone rather trying to access/relate to the others.

Simple javascript but makes a big difference.

init:       function(){
    var dzClosure = this;

    $('#Btn').on('click',function(e) {
        dzClosure.processQueue();
    });