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

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?

Defining below code globally will help:

Dropzone.autoDiscover = false;

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.

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

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

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.

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

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

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.

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

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

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>

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

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;