How do I preload images into dropzone.js

Question

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?

Belier

Answer 1

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.

Escalade

If you have limited the number of files one can upload, you must add myDropzone.files.push(mockFile); to keep enforcing this upload limit. – Carnap

Really you should always include the line from Kent (myDropzone.files.push(mockFile), otherwise calling myDropzone.removeAllFiles() won't remove the pre-populated files. – Brachio

Answer 2

Dropzone is so strong and awesome that you can do anything on it .
Steps to Follow -- >

1)First of all you will have to create a server side script which will get all the filenames and its size and send it as json response.
PHP code :

  foreach($myitemfiles as $file){ //get an array which has the names of all the files and loop through it 
        $obj['name'] = $file; //get the filename in array
        $obj['size'] = filesize("uploadsfolder/".$file); //get the flesize in array
        $result[] = $obj; // copy it to another array
      }
       header('Content-Type: application/json');
       echo json_encode($result); // now you have a json response which you can use in client side 

2)Now you can use the response to display the uploaded files.Write the below code inside the dropzone init function
Javascript Code :

  init: function() {

      var thisDropzone = this;

        $.getJSON('get_item_images.php', function(data) { // get the json response

            $.each(data, function(key,value){ //loop through it

                var mockFile = { name: value.name, size: value.size }; // here we get the file name and size as response 

                thisDropzone.options.addedfile.call(thisDropzone, mockFile);

                thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "uploadsfolder/"+value.name);//uploadsfolder is the folder where you have all those uploaded files

            });

        });
}

Note : don't take the whole file url path in filename just take the filename itself thats it .
This works

Callow

Thanks, that works. It should be noted, though, that calling the addedfile and thumbnail functions directly like that bypasses the corresponding events, which is fine for my purposes. Another quirk: I had to generate thumbnails on the server side to use in the thumbnail call, as using the image directly bypasses dropzone's client-side thumbnail generation and just sticks the full-size image into the preview element without cropping, so rectangular images would be squashed. – Belier

when I preload a image using this method, there still is a progress bar in the image (using default css). How do I remove this bar? – Dickinson

Also it doesnt follow maxFiles when adding files like this. I have max file as 1, and when I try to upload new one, it accepts the file. – Dickinson

you can remove the progress bar by adding thisDropzone.emit("complete", mockFile); However I cant not resize the thumbnail to fit the box – Cotopaxi

how to use with ajax request instead? – Panslavism

I hide progress bar using $(".dz-progress").hide(); if it help someone – Highland

I have customized template to show title and caption of image, any idea how to load these values from server in custom template? – Highland

if you wish to resize the images to fit the thumbnail just add the following code. img[data-dz-thumbnail] { width: 100%; height: 100%; object-fit: cover; } – Anonymous

Answer 3

I trying this code and it's working for me :

Dropzone.options.myDropzone = {
  init: function() {
    let myDropzone = this;

    // If you only have access to the original image sizes on your server,
    // and want to resize them in the browser:
    let mockFile = { name: "Filename 2", size: 12345 };
    myDropzone.displayExistingFile(mockFile, "https://i.picsum.photos/id/959/600/600.jpg");

    // If the thumbnail is already in the right size on your server:
    let mockFile = { name: "Filename", size: 12345 };
    let callback = null; // Optional callback when it's done
    let crossOrigin = null; // Added to the `img` tag for crossOrigin handling
    let resizeThumbnail = false; // Tells Dropzone whether it should resize the image first
    myDropzone.displayExistingFile(mockFile, "https://i.picsum.photos/id/959/120/120.jpg", callback, crossOrigin, resizeThumbnail);

    // If you use the maxFiles option, make sure you adjust it to the
    // correct amount:
    let fileCountOnServer = 2; // The number of files already uploaded
    myDropzone.options.maxFiles = myDropzone.options.maxFiles - fileCountOnServer;
  }
};

Roselba