Dynamically initialize dropzone.js in Ajax-loaded Form

Question

I would like to use dropzone.js in a dynamically loaded form. This is my actual code.

Implement the source and set autodiscover to false

 <script src="scripts/dropzone.min.js"></script> <script> Dropzone.autoDiscover = false; </script>

I load the Form with jquery

 $.ajax({ method: "GET", url: "form.php", data: { user_id: userId } }).done(function( result ) { $( ".user-details-"+userId ).append( result ); var myDropzone = new Dropzone("div.dropzone", { url: "imageupload.ajax.php", }); });

After the html-result from the ajax-call is appended to my div.user-details the dropzone works without problems. But when I close the Form (remove from dom) and load it again I´ve got the error "Dropzone already attached." in my console.

This error also occours, if I change the initialization and use a div with a unique id.

How can I destroy the dropzone after remove the form from the dom?

Answer 1

The problem is you are using a class selector div.dropzone

So you should check if this class exists...& if exists does it already contains a dropzone..make it empty $('div.dropzone').empty();

another way would to be to use dynamic ID

  var myDropzone = new Dropzone("div#dropzone", {

Answer 2

var element = document.getElementById("#Your-DropZone-Element")
if (element.dropzone) {
    element.dropzone.destroy();
}