How to create thumbnail for uploaded images on DropZone.js?

Pedram picture Pedram · Apr 20, 2015 · Viewed 16.3k times · Source

With below code i got all uploaded images with DropZone,but i now i have a simple problem, it already showing Original images as thumbnail but i need to show thumbnail with base64 same as dropzone made when want to upload new image.

dropzone.js

 init: function() {
         var thisDropzone = this;
        var pageid = $("#pageid").val();
        $.getJSON('plugin/dropzone/get_item_images.php?id='+pageid, function(data) { 

            $.each(data, function(key,value){ 

                var mockFile = { name: value.name, size: value.size }; 

                thisDropzone.options.addedfile.call(thisDropzone, mockFile);
                thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "/admin/uploads/"+value.name);
                thisDropzone.emit("complete", mockFile);

            });
        });

      },

So the problem is with this code i able to show uploaded images with dropzone but it show thumbnail with original images not real thumbnail that created with base64. dropzone made thumbnail with base64 when you want to upload new image, i want to show thumbnail like this.

Answer

ITSolution picture ITSolution · Apr 23, 2015

You should use createThumbnailFromUrl , orginally posted here

myDropzone.emit("addedfile", mockFile);
myDropzone.createThumbnailFromUrl(mockFile, '/your-image.jpg');