Dynamically add dropzone.js div element to the for

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

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 2

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.

Answer 3

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 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);
              }        
       }     
    };