How to show files already stored on server

[enyo]

How do I make previously uploaded files appear in the Dropzone when the page loads.

[enyo]

In short: use myDropzone.displayExistingFile().

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;
  }
};

[JamieGarcia123]

if it means anything we hit this with other dropzone methods //vue2Dropzone.js

[enyo]

I can't say specifically because I don't know exactly what your setup is, but you could try to provide the init() configuration option, and use this inside. Let me know if that got you a step further. If that didn't work, please create a new discussion with a fitting title and a bit more of your code, and tag me and I'll have a look.

[JamieGarcia123]

UPDATE: I figured out we were calling the mounted method we use incorrectly we weren't looking for existing files in that specific method we had

[shiroze]

I'm Facing Issue when I try save existing file. it say "Dropzone Length 0"

let mockFile = { name: "Filename 2", size: 12345 }; myDropzone.displayExistingFile(mockFile, "https://i.picsum.photos/id/959/600/600.jpg");

I'm using this code to show my existing file.

[iwasherefirst2]

What if I don't want to make the file public via http? Any option to still show the files already on the server? (UseCase: Application Form, sensitive data, user using back button).

[berycz]

Changing maxFiles is not really a good solution though, what if maxFiles=1? Then you need to do myDropzone.element.classList.add("dz-max-files-reached");, but then also remove the class when removing the file.
And if maxFiles=2+, how do you deal with a delete->add? I guess when removing a file, you have to somehow check, if it's in myDropzone.files and if not, then do myDropzone.options.maxFiles = myDropzone.options.maxFiles + 1; ?
Or do I get it wrong, since I don't do it inside init?

[enyo]

There is a PR addressing this exactly: #2003

I'm still thinking about how to implement this best, because it might not always be what users want. And I need to write some tests for it too. But a better solution is coming.

[faiyazalam]

I am using v6.0.0-beta.2 and this is the working solution for me:

`        const mockFile = {
                    name: asset.name,
                    id: asset.id,
                    accepted:true //this is required to set maxFiles count automatically
                };
                mydropzone.files.push(mockFile);
                mydropzone.displayExistingFile(mockFile, asset.url);`

Hope this helps:)

[timo002]

This is working for me, but now I'm facing CORS erros.
Access to image at 'https://url/to/image' from origin 'https://domaim.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I changed displayExistingFile() to:

mydropzone.displayExistingFile(mockFile, asset.url, null, '*');

That is not solving the issue. I'm familier with CORS, but this one I can't understand.

[padi-dev-lucvt]

same question

[sathyapillay]

This works with 6.0.0-beta.2 on my side, for anyone still struggling:

const dz = new Dropzone(".dropzone", {
paramName: "file",
maxFilesize: 2,
addRemoveLinks: true,
init: function() {

  var myDropzone = this
  
  $.get("images_url", function(data) {
    $.each(data, function(key, value){           
      var mockFile = {
        name: value.name,
        size: value.size
      };
      myDropzone.files.push(mockFile);
      myDropzone.displayExistingFile(mockFile, value.url, null, '*');
    });
  })
}

});