Multiple Dropzone in a single page

Question

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.

Do i need to create 2 different dropzone form to handle this?What can i put instead of 'document.body'? — mekafe, Oct 30 '14 at 16:00

lin · Accepted Answer · 2018-05-02T08:52:32.010

27

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

edited May 02 '18 at 08:52

answered Oct 30 '14 at 15:55

lin

17,956
4
59
83

3

I am getting this error: "Uncaught Error: Dropzone already attached." – Nihilarian Aug 01 '17 at 17:47
Disable autodiscover and you will be fine. – lin Aug 02 '17 at 07:56
4

What if the content is dynamic? So maybe sometimes I have two or three dropzones :) – Manos Dec 02 '17 at 22:29
asp.net site just ignores the tag. – Robert Koernke May 28 '19 at 18:42

score 0 · Answer 2 · answered Feb 14 '20 at 09:58

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

score 0 · Answer 3 · answered Oct 09 '22 at 03:36

Note: I'm not using Ajax in order to upload the image on server. For Ajax, One can use url. Attaching the doc DropzoneDoc. It's works like action.( Something like that. Check my solution you can get some idea to do it in your case.

When I working we dropzone, I faced a similar issue working with the Meteor framework.

In the case of Meteor Framework, dropzone is initialized in the below code. This will look different to you, it's the way to initialize in the Meteor framework. In your case, you can find similarities when using the dropzone library.

Params are added as

params='{name: "Image1"}'

{{> dropzone url=getDropZoneImageUploadURL id='candidate-identity-photo-proof'
  init=initFunction params='{name: "Image1"}'
  acceptedMimeTypes= 'image/jpeg,image/png,image/jpg' maxFiles=1
  success=uploadSuccessHandler maxFilesize=2 dictDefaultMessage= "Photo 
  ID Proof Photo"
  previewsContainer='#upload-photo-id-holder'
  previewTemplate=previewTemplateString}}

when the file is getting uploaded check "this" context as mentioned below code. You can use the params value to distinguish the image.

var initFunction = function () {
this.on("addedfile", function () {
    if (this.files[1] != null) {
        this.removeFile(this.files[0]);
    }
});
this.on("sending", function (file, xhr, formData) {
    console.log(this); // Here you can get the value
    formData.append("type", "image");
});
this.on("error", function (fileInfo, errorMessage) {
    var message = "ERROR";
    showNotification("error", { message: message }, {});
});

};

Multiple Dropzone in a single page

3 Answers3

Linked