How to preload images into dropzone.js

dropzone.jspreloadingpreview

I have a dropzone.js instance on a web page with the following options:

autoProcessQueue:false
uploadMultiple:true
parallelUploads:20
maxFiles:20

It is programmatically instantiated, as it is part of a larger form. I have it rigged up to process the queue when the form is submitted.

The goal is for my users to be able to use the dropzone to manage images for an item, so when I load my 'edit/update' view for an item, I'd like to preload the dropzone with the images that had previously been uploaded for that item. Is there a good way to implement this so that the already-there items don't get re-uploaded when they submit their changes to the image list?

Best Answer

Proper way to do it is to use .emit method provided by on dropzone js to add a file and thumbnail to preload images from the server. See sample code below. Taken from https://github.com/enyo/dropzone/wiki/FAQ#how-to-show-files-already-stored-on-server

// Create the mock file:
var mockFile = { name: "Filename", size: 12345 };

// Call the default addedfile event handler
myDropzone.emit("addedfile", mockFile);

// And optionally show the thumbnail of the file:
myDropzone.emit("thumbnail", mockFile, "/image/url");

.emit method from dropzone will trigger init function and if you have any addedfile event callback written for it. e.g. I am using addedfile event add remove button and also attached delete image functionality.

Related Solutions

Javascript – Integrating Dropzone.js into existing HTML form with other fields

Here's another way to do it: add a div in your form with a classname dropzone, and implement dropzone programmatically.

HTML :

<div id="dZUpload" class="dropzone">
      <div class="dz-default dz-message"></div>
</div>

JQuery:

$(document).ready(function () {
    Dropzone.autoDiscover = false;
    $("#dZUpload").dropzone({
        url: "hn_SimpeFileUploader.ashx",
        addRemoveLinks: true,
        success: function (file, response) {
            var imgName = response;
            file.previewElement.classList.add("dz-success");
            console.log("Successfully uploaded :" + imgName);
        },
        error: function (file, response) {
            file.previewElement.classList.add("dz-error");
        }
    });
});

Note : Disabling autoDiscover, otherwise Dropzone will try to attach twice

Way to do drag-and-drop re-ordering of the preview elements in a dropzone.js instance

I've got it working now using jquery-ui's sortable. The trick was to make sure to use the 'items' option in sortable to pick only the dz-preview elements, because dropzone.js has the dz-message element along with the dz-preview elements in the main container. Here's how my code looks:

The HTML:

<div id="image-dropzone" class="dropzone square">

The script:

$(function() {
    $("#image-dropzone").sortable({
        items:'.dz-preview',
        cursor: 'move',
        opacity: 0.5,
        containment: '#image-dropzone',
        distance: 20,
        tolerance: 'pointer'
    });
})

Best Answer

Related Solutions

Javascript – Integrating Dropzone.js into existing HTML form with other fields

Way to do drag-and-drop re-ordering of the preview elements in a dropzone.js instance

Related Topic