Search code examples
javascriptmeteorfile-uploaddropzone.js

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 = new Dropzone(
        document.body,
        {
            url : "upload1"...
            .
            .
            . some parameters
         };

var myDropzone2 = new Dropzone(
        document.body,
        {
            url : "upload'"...
            .
            .
            . some parameters
         };

When I do this, I'm getting the error Dropzone already attached.


Solution

  • 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"
            }
        );