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.

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.

• javascript
• jquery
• dropzone.js

Share Improve this question Follow edited Apr 23, 2016 at 19:48 Félix Adriyel Gagnon-Grenier 8,8931010 gold badges5757 silver badges6868 bronze badges asked Oct 12, 2014 at 8:54 JaspalJaspal 64133 gold badges1313 silver badges2323 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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.

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>

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"

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("plete", function (file) {
          if(this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
             consol.log("pleted 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);
              }        
       }     
    };  

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.