How can I show you the files already stored on server using Dropzone.js

Question

I Don\'t understand that... call its always undefined

Create the mock file:

var mockFile = { name: \"Filename\", size: 12345 };
         


        

Answer 1

In this answer https://stackoverflow.com/a/17763511, it's implemeneted with emmiting a thumbnail event.

Following is an example of doing it using createThumbnailFromUrl.

HTML element;

JS code;

previewThumbailFromUrl({
    selector: 'sample-img',
    fileName: 'sampleImg',
    imageURL: '/images/sample.png'
});

function previewThumbailFromUrl(opts) {
    var imgDropzone = Dropzone.forElement("#" + opts.selector);
    var mockFile = {
        name: opts.fileName,
        size: 12345,
        accepted: true,
        kind: 'image'
    };
    imgDropzone.emit("addedfile", mockFile);
    imgDropzone.files.push(mockFile);
    imgDropzone.createThumbnailFromUrl(mockFile, opts.imageURL, function() {
        imgDropzone.emit("complete", mockFile);
    });
}

Working Samples on JSFiddle:

1. Load images on same domain
2. Load images with crossOrigin