Dynamically add dropzone.js div element to the form

Question

I have to use multiple dropzone areas to upload images. I have used the jQuery append() function to dynamically create the div.

The problem is that the dynamically created dropzone is not initialized and therefore not working.

Answer 1

Just make sure to call the plugin on that newly appended element . The problem is the plugin gets attached to only elements which were present initially.

So, call the plugin once again after you append the element so, it gets attached and works again.

Answer 2

Here is the script i have used to do the same. I have changed the dynamically created input type text's name field by using the querySelector . The querySelector returns the reference of the elements which have custom attribute i have used data-tagline .

 Dropzone.options.myDropzone = { init: function() { this.on("addedfile", function(file) { _ref = file.previewTemplate.querySelector('[data-tagline]'); _ref.name = "This is my New name attribute of element"; }) }, previewTemplate:"<div class=\\"dz-preview dz-file-preview\\">\\n "+ "<div class=\\"dz-details\\">\\n "+ "<div class=\\"dz-filename\\"><span data-dz-name></span></div>\\n "+ "<div class=\\"dz-size\\" data-dz-size></div>\\n "+ "<img data-dz-thumbnail class=\\"img-responsive img-thumbnail\\" />\\n "+ "<input type=\\"text\\" data-tagline />"+ "</div>\\n "+ "<div class=\\"dz-progress\\">"+ "<span class=\\"dz-upload\\" data-dz-uploadprogress></span>"+ "</div>\\n "+ "<div class=\\"dz-success-mark\\"><span>✔</span>"+ "</div>\\n "+ "<div class=\\"dz-error-mark\\"><span>✘</span>"+ "</div>\\n "+ "<div class=\\"dz-error-message\\"><span data-dz-errormessage></span>"+ "</div>\\n"+ "</div>", }; 

 <div id="my-dropzone" class="dropzone" action="upload.php"></div> 

Answer 3

In your script you need a function to create the form for dropzone, and then execute the function Dropzone.discover()

function add_dropzone() {
  const drop_zone = document.createElement("form");
  drop_zone.setAttribute("class","dropzone");
  drop_zone.setAttribute("action","url_to_upload_files/");
  drop_zone.setAttribute("id","my_dropzone");
  //find a div where you want to add your dropzone
  document.getElementById("div_for_dropzone").appendChild(drop_zone);
  // this function will find the class="dropzone" tag and load it.
  Dropzone.discover();
}

then in your html you just need to add a div with the id="div_for_dropzone"

Answer 4

dynamically create dz element:

var d='<div id="dzFormDiv">';
d+='  <form ';
d+='      class="dropzone"';
d+='      id="my-awesome-dropzone">';
d+='      <input type="hidden" id="dztoken" name="dztoken">  ';
d+='      <input type="hidden" id="dzt2" name="dzt2"> ';
d+='  </form>   ';
d+='  <div id="dsbw">';
d+='    <button id="btnRemoveAlldz">clear</button>';
d+='  </div>    ';
d+='</div> ';

append to div somewhere

$("#uploads").prepend(d);   

start instance

myAwesomeDropzone = new Dropzone("#my-awesome-dropzone", { url: "../cgi/newUploader.exe"}); 

add options

   Dropzone.options.myAwesomeDropzone = {
   init: function () {
        var myDropZone = this;
        $("#btnRemoveAlldz").click(function () {                                    
                    myDropZone.removeAllFiles();
                }
        );            
                    myDropZone.on("complete", function (file) {
          if(this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
             consol.log("completed upload");
          }
        });
                    myDropZone.on("sending", function (file) {                            
                            // do something before uploading
        });

    },
       error: function(){
         // call error handling function
       },
       success: function(file,r){
          // called after EACH successfull upload
            file.previewElement.classList.add("dz-success");        
            if(r.indexOf("ok")>-1){                 
                console.log("success");
              }else{
                console.log(r);
              }        
       }     
    };  

Answer 5

A bit late to the party but they thought about it. As stated in the usage part of the documentation:

Alternatively you can create dropzones programmaticaly (even on non form elements) by instantiating the Dropzone class

// Dropzone class:
var myDropzone = new Dropzone("div#myId", { url: "/file/post"});

You may have to create an element and set some properties manually.

var form = document.createElement('form');
form.classList.add('dropzone');
form.method = 'post';
form.action = '/file/post';
document.getElementById('parent').appendChild(form);
new Dropzone(form);

Don't forget to specify an url option if you're not using a form element, since Dropzone doesn't know where to post to without an action attribute.