Dropzone createThumbnailFromUrl() issue

问题

I need to add pre-existing image files to dropzone by using Laravel 5.4. This is why I use createThumbnailFromUrl() function. But it does not generate images properly. Instead it shows them in blank way. I used that link (jsfiddle) for that purpose. I googled a lot, tried several ways, but it did not help:

Below is my code:

<script type="text/javascript" src='{{asset("js/dropzone/min/dropzone.min.js")}}'></script>
<script type="text/javascript">

  Dropzone.options.addImages = {
  paramName: "file", // The name that will be used to transfer the file
  addRemoveLinks: true,
     // The setting up of the dropzone
     init:function() {

        // Add server images
        var myDropzone = this;
        var existingFiles = [
        { name: "Filename 1.pdf", size: 12345678,imageUrl:'http://img.tfd.com/wn/93/17E8B3-awful.png' },
        { name: "Filename 2.pdf", size: 12345678,imageUrl:'http://img.tfd.com/wn/93/17E8B3-awful.png' },
        { name: "Filename 3.pdf", size: 12345678,imageUrl:'http://img.tfd.com/wn/93/17E8B3-awful.png' },
        { name: "Filename 4.pdf", size: 12345678,imageUrl:'http://img.tfd.com/wn/93/17E8B3-awful.png' },
        { name: "Filename 5.pdf", size: 12345678,imageUrl:'http://img.tfd.com/wn/93/17E8B3-awful.png' }
        ];

        for (i = 0; i < existingFiles.length; i++) {

           // alert(existingFiles[i].imageUrl);

           myDropzone.emit("addedfile",existingFiles[i]);
           myDropzone.files.push(existingFiles[i]);
           myDropzone.createThumbnailFromUrl(existingFiles[i], existingFiles[i].imageUrl, function() {
            myDropzone.emit("complete", existingFiles[i]);
        }, "anonymous");

       }
   },
};
</script>

Here is the result :( :

P.S: Any kind of help would be appreciated.

回答1:

had the same issue with dropzone 5.3

this fixed it for me

let mockFile = { name: "Loaded File", dataURL: relURL };
dropzoneInst.files.push(mockFile);
dropzoneInst.emit("addedfile", mockFile);
dropzoneInst.createThumbnailFromUrl(mockFile,
    dropzoneInst.options.thumbnailWidth, 
    dropzoneInst.options.thumbnailHeight,
    dropzoneInst.options.thumbnailMethod, true, function (thumbnail) 
        {
            dropzoneInst.emit('thumbnail', mockFile, thumbnail);
        });
dropzoneInst.emit('complete', mockFile);