dropzone.js is giving error "Invalid dropzone element" on page without a dropzone

Question

I'm using dropzone js and it's working great on pages that I require a dropzone. On any other page though it's giving me a "Invalid dropzone element" error message and causing issues with my other javascript.

I have a custom JS file (which loads immediately after the dropzone.js file) and at the very top of the file I have the following line of code:

Dropzone.autoDiscover = false;

This should stop it from looking at any page where I'm not enabling it programatically. The error only goes away on pages where there is a valid dropzone.

I also set the following code on line 1470 on dropzone.js to try and enable it there too:

Dropzone.autoDiscover = false;

How can I get rid of this error?

You can check if the element is there, before you init dropzone. With jQuery you can try something like this: `if ($('#dropzoneDiv').length) { initDropZoneHere }` — Philip, Jan 09 '15 at 22:35
Do you use jQuery or pure JS? The idea is that you can check if the div exists before you init Dropzone. — Philip, Jan 09 '15 at 22:51
@Philip I'm using jQuery but would I put this code as a wrapper in the dropzone.js file? — user1048676, Jan 09 '15 at 22:53

score 37 · Accepted Answer · answered Jan 09 '15 at 22:57

37

With pure JS you can try this:

if (document.getElementById('DropzoneElementId')) {
  var myDropzone = new Dropzone("div#DropzoneElementId", { url: "/file/post"});
  // other code here
}

or if you use jQuery:

if ($('#DropzoneElementId').length) {
  $("div#DropzoneElementId").dropzone({ url: "/file/post" });
  // other code here
}

answered Jan 09 '15 at 22:57

Philip

5,011
2
30
36

This worked. I added it to both files and now I'm good to go. Thanks. – user1048676 Jan 09 '15 at 22:59
One thing more keep in mind you may not use as form with in a form example below: // Dropzone will not work
....
@csrf

Upload Multiple Image By Click On Box

you will find error in browser console uncaught Error: Invalid dropzone element. – Adnan Zaheer Jun 07 '23 at 12:56

score 3 · Answer 2 · answered Oct 27 '19 at 09:45

3

Long time ago but: Put the script after your Form Element and the error is gone.

answered Oct 27 '19 at 09:45

VZimmerl

165
1
10

score 0 · Answer 3 · answered Jan 25 '21 at 20:42

0

Using jQuery, checking if the target element exists is NOT a requirement.

$(".my_element").dropzone(dropzone_options);

answered Jan 25 '21 at 20:42

jDelforge

129
4
15

dropzone.js is giving error "Invalid dropzone element" on page without a dropzone

3 Answers3

Upload Multiple Image By Click On Box

Linked