How can I fix this "Dropzone already attached" error?

Question

I have this sample:

link

I managed to create this form but unfortunately it does not work because I get error.

Dropzone already attached.

CODE HTML:

<div class="dropzone dz-clickable" id="myDrop">
  <div class="dz-default dz-message" data-dz-message="">
    <span>Drop files here to upload</span>
  </div>
</div>

CODE JS:

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});

// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });

I set up Dropzone.autoDiscover = false; but unfortunately still not working.

Can you please tell me what is causing this problem?

Satirical

Answer 1

You should use either

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

or

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

not both. Basically what you are doing is calling the same thing twice.

Nimrod

@Beene is very well answered! – Genovevagenre

Answer 2

Defining below code globally will help:

Dropzone.autoDiscover = false;

Beene

Thanks for this simple, but effective solution. I think the problem is the Dropzone plugin, that auto-instantiates all dropzone instances automatically. With most plugins, this normally doesn't happen till you instantiate it yourself. So we expect the same with Dropzone. Then, when we instantiate dropzone, believing it to be the ONLY instantiation, we actually get two, due to the plugin automatically doing one as well. Which is why this line of code works - by switching off that first instantiation. – Tseng

I am getting this error: "Uncaught Error: Dropzone already attached." – Pair

This is the real answer. Without it dropzone uses tag with .dropzone class. If u want use same style and dropzone on element with this class u need to set this, – Moultrie

Be sure to run this before document load or else dropzone's auto discover might beat you to the punch (@NikhilRao, I suspect this is what happened in your case). – Cube

Worked for me. I just added it above my $("#picture").dropzone({...}) – Skillful

Userful! I was tried to add it in window.onload = function () {Dropzone.autoDiscover = false;}, failed. Then I moved it to global area, it works. – Imparity

Answer 3

Add Dropzone.autoDiscover = false before $(document).ready like this:

Dropzone.autoDiscover = false;
$(document).ready(function () {

});

Trovillion

I've removed it in the edit, but your answer ended with "And don't forget". Did you mean to add more to your answer? – Aphoristic

Should be the Best Answer – Berkman

Answer 4

This error can also happen when an element has already had a class dropzone.

However if this is removed then for some reason the default style will not apply after Dropzone is initiated. My only workaround is to create a custom style for that element.

Hagiographa

I set autoDiscover to false and I have only one element with a class dropzone. Do you know what can be a problem? – Taneshatang

Ok, I figured out. The problem was that I had already included dropzone.js (from template I have bought), so I just left only once. – Taneshatang

Answer 5

<script>
  Dropzone.autoDiscover = false;
  $(document).ready(function() {
    var myDrop= new Dropzone("#myDrop", {
      url: '/admin/media'
    });
  });
</script>

instead of

<script>
  $(document).ready(function() {
    Dropzone.autoDiscover = false;
    var myDrop= new Dropzone("#myDrop", {
      url: '/admin/media'
    });
  });
</script>

Begot

Answer 6

After searching and trying several solution on the net, here I got one of the best solutions for solving this issue.

HTML

<div id="some-dropzone" class="dropzone"></div>

JavaScript

Dropzone.options.someDropzone = {
  url: "/file/post"
};

Therefrom

Also please notice: DO NOT put the line in jQuery function, otherwise it will has no effect. Have to put the line to run before all other actions. – Shandra

And also DO NOT set autoDiscover to false. – Shandra

Answer 7

This solution did not work for me when using Angular:

Dropzone.autoDiscover = false;

The only way I could get it to work with Angular without having to edit the dropzone.js file was this:

@ViewChild('containerElement') containerElement: ElementRef;

...    

/* Make sure all Dropzone instances are destroyed */
if (Dropzone.instances.length > 0) {
    Dropzone.instances.forEach((e: any) => {
        e.off();
        e.destroy();
    });
}

/* Remove existing dropzone element from the DOM */
const element: any = document.getElementById('my-dropzone');
element.remove();

/* Create new dropzone DOM element */
const html =
` <div id="my-dropzone" class="dropzone">` +
    `<div class="dz-message">` +
    `<i class="fad fa-cloud-upload-alt dz-message-icon"></i>` +
    `<p>Drop files, or click to browse</p>` +
    `</div>` +
`</div>`;
this.containerElement.nativeElement.insertAdjacentHTML('beforeend', html);

Fieldwork

Answer 8

This is my hackish workaround. It basically checks if dropzone is loaded as DOM, and if it has not, then it will create one.

    function dropzoneExists(selector) {
        var elements = $(selector).find('.dz-default');
        return elements.length > 0;
    }

    var exists = dropzoneExists('div#photo_dropzone');
    if(exists) return;

    $('div#photo_dropzone').dropzone({
       ...
       ...
    });

UPDATE: It is suggested to figure out why the dropzone is initiated twice. Fixing that is the right way, and this answer is only a technically-debtful workaround.

Vivanvivarium

Answer 9

I fixed this issue by editing the dropzone.js. just go to dropzone.js and replace

if (this.element.dropzone) {
    throw new Error("Dropzone already attached.");
  }

with

if (this.element.dropzone) {
    return this.element.dropzone;
 }

this solution is originally found by Haskaalo, posted on the github issues

Daff

... and then when your coworker updates the library, your app mysteriously breaks. – Cube

Answer 10

sometimes is because you have twice elements html with the same id dropzone.

<div id="dropzone" class="dropzone"></div>

<div id="dropzone" class="dropzone"></div>

Loom

Answer 11

You can concat your id "myDrop" with some unique value for every single instance of Dropzone.

Example:

 html: <span className="custom-file-input" id={"my-dropzone" + this.dropzoneId}></span>

 in func: 
 this.myDropzone = new Dropzone("span#my-dropzone" + this.dropzoneId, options);

Seibel

Answer 12

Go to dropzone.js and replace if(n.element.dropzone) throw new Error("Dropzone already attached."; with if(n.element.dropzone) return this.element.dropzone;

Scevor