How do I programmatically add a thumbnail to Dropzone?

Question

I am using Dropzone to allow users to upload files, to allow users to associate an image with one of several headings on the page. I programmatically generate the Dropzones, one for every heading, and when the file is uploaded I save in a database which heading is associated with which uploaded file.

I very much like the Dropzone thumbnail that it generates when a file is uploaded. On pageload, I would like to query the server for existing images and put those images in the thumbnails for the correct dropzone.

How do I programmatically associate a thumbnail from a URL to a specific Dropzone?

The code for my dropzones is :

 $(function () {

$('.newdrop').each(function (index) {

    var id = parseInt($(this).closest("a").attr("id"));
    var dropzoneID = "#drop" + id;

    var newDropzone = new Dropzone(dropzoneID, {
            url: "/VoltLink/SaveUploadedFiles/" + id,
            clickable: false,
            maxFiles: 1, 

        init : function() {
        this.on("addedfile", function() {
            if (this.files[1]!=null){
                this.removeFile(this.files[0]);
            }
        });
    }

        }
    );       

 });
 });

I have a server-side function that queries and finds headings with images, which calls a method via SignalR

lnk.client.updateImage = function(image) {

    var headingID = image.ID;

    $('#' + headingID + ' .existingImage').html(image.imageURL);

}

How do I use 'image.imageURL' to activate the dropzone thumbnail?

Answer 1

For each image that you want to add, you have to:

• Create an object that describes your file stored in the server (with name, size and other information used by Dropzone instance);

• Call the "addedfile" event handler, passing the object created in the previous step;

• Call the "thumbnail" event handler to display the new image, passing the same object and the thumbnail URL.

In my case I've used these instructions:

var myFile = {
    name: "image-name-example",
    size: 987654321
};

var myDropzone = Dropzone.forElement("my-dropzone-form");
myDropzone.emit("addedfile", myFile);
myDropzone.emit("thumbnail", myFile, "http://url/to/my/thumbnail");

You can find explained this procedure in the project wiki:

• https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server
• https://github.com/enyo/dropzone/wiki/FAQ#provide-a-thumbnail-for-files