How to show the files already stored on server using Dropzone.js and JavaScript?

Sometimes, we want to show the files already stored on server using Dropzone.js and JavaScript.

In this article, we’ll look at how to show the files already stored on server using Dropzone.js and JavaScript.

How to show the files already stored on server using Dropzone.js and JavaScript?

To show the files already stored on server using Dropzone.js and JavaScript, we can set the files list.

For instance, we write

<form id="sample-img" action="/upload" class="dropzone">
  <div class="dz-default dz-message"></div>
</form>

to add a form with a drop zone div.

Then we write

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

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

to define the previewThumbailFromUrl function.

In it, we get the drop zone element with Dropzone.forElement.

Then we use imgDropzone.emit("addedfile", mockFile); to emit the addedFile event with mockFile.

Next we add the mockFile to the list with

imgDropzone.files.push(mockFile);

Then we update the thumbnail with imgDropzone.createThumbnailFromUrl.

Conclusion

To show the files already stored on server using Dropzone.js and JavaScript, we can set the files list.