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?

Answer 1

Defining below code globally will help:

Dropzone.autoDiscover = false;

Answer 2

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.