Programmatically Add Existing File to Dropzone

Question

I'm trying to add an existing image to my dropzone programmatically, using the dropzone.js FAQ as a guide:

// Add the existing image if it's there. // headerDropzone is my dropzone (debug shows it as existing and initialized at this point. var on_load_header = $( '[name="on_load_header_image"]' ).val(); var on_load_header_path = $( '[name="on_load_header_image_path"]' ).val();  if ( on_load_header ) {      // Hardcoded size value is just for testing, see my second question below.     var on_load_header_data = { name: on_load_header, size: 12345 };      // Call the default addedfile event handler     headerDropzone.options.addedfile.call( headerDropzone, on_load_header_data );      // And optionally show the thumbnail of the file:     headerDropzone.options. thumbnail.call( headerDropzone, on_load_header_data, on_load_header_path);  } 

My first problem is that this is just not working. The addedfile event doesn't fire (or at least the addedfile handler in headerDropzone never fires), same goes for thumbnail.

My second problem/question is: do I have to provide the file size? I could get it server side, but I'd rather not do it if I don't actually need to.

Answer 1

If you need to add multiple existing files into Dropzone, declare your existing files as array and then add it into Dropzone programmatically inside a loop like so...

        Dropzone.autoDiscover = false;         var myDropzone = new Dropzone("#myDropzone", {             url: "/file/post",             maxFileSize: 50,             acceptedFiles: ".pdf",             addRemoveLinks: true,             //more dropzone options here         });          //Add existing files into dropzone         var existingFiles = [             { name: "Filename 1.pdf", size: 12345678 },             { name: "Filename 2.pdf", size: 12345678 },             { name: "Filename 3.pdf", size: 12345678 },             { name: "Filename 4.pdf", size: 12345678 },             { name: "Filename 5.pdf", size: 12345678 }         ];          for (i = 0; i < existingFiles.length; i++) {             myDropzone.emit("addedfile", existingFiles[i]);             //myDropzone.emit("thumbnail", existingFiles[i], "/image/url");             myDropzone.emit("complete", existingFiles[i]);                         } 

Answer 2

The Dropzone FAQ leaves out important settings required to properly preload a dropzone with (an) existing file(s).

My init method for my dropzone:

Dropzone.options.MyDropZoneID = {     ...     init: function () {         var mockFile = { name: fileName, size: fileSize, type: fileMimeType, serverID: 0, accepted: true }; // use actual id server uses to identify the file (e.g. DB unique identifier)         this.emit("addedfile", mockFile);         this.createThumbnailFromUrl(mockFile, fileUrl);         this.emit("success", mockFile);         this.emit("complete", mockFile);         this.files.push(mockFile);         ... 

I don't know if the above is a perfect implementation, but it is working correctly with the maxFiles setting. Which is very important if you don't want buggy behavior (like the default message displaying when it shouldn't or extra files getting uploaded). You definitely need to set the accepted property to true and add the file to the files property. The only thing that I think is not required is emitting the success. I haven't played around with that enough though to know for sure.

Note: I used the following NuGet package:

• Created by: Matias Meno
• Id: dropzone
• Version: 4.2.0