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?

Mayne

You can check if the element is there, before you init dropzone. With jQuery you can try something like this: if ($('#dropzoneDiv').length) { initDropZoneHere } – Snicker

@Snicker Where would I put this code? – Mayne

Do you use jQuery or pure JS? The idea is that you can check if the div exists before you init Dropzone. – Snicker

@Snicker I'm using jQuery but would I put this code as a wrapper in the dropzone.js file? – Mayne

Answer 1

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
}

Snicker

This worked. I added it to both files and now I'm good to go. Thanks. – Mayne

One thing more keep in mind you may not use as form with in a form example below: // Dropzone will not work <form action="/post/update" method="post" > .... <form action="{{ route('upload-files') }}" method="post" enctype="multipart/form-data" id="image-upload" style="height: 500px; background-color: #9ABCEA;"> @csrf <div> <h4>Upload Multiple Image By Click On Box</h4> </div> </form> </form> you will find error in browser console uncaught Error: Invalid dropzone element. – Thereunder

Answer 2

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

Metagnathous

Answer 3

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

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

Camus