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

[eugemious]

qweee

[MagnusOxlund]

It looks odd having to manually balance the maxFiles value. Shouldn't the process of registering pre-existing files update the file count that's used to determine whether the maxFiles limit has been reached?

[MagnusOxlund]

Also, displayExistingFile expects to download the file from the server. That doesn't account for scenarios where file previews are pre-loaded into the markup.

[MagnusOxlund]

Here's how to register a dummy file manually in a way that works with maxFiles:

const dummy_file = {'name': 'whatever', 'size': 12345, 'accepted': true}
dropzone_instance.files.push(dummy_file);

[nachtfunke]

So my dropzone is configured to not create and show thumbnails with createImageThumbnails: false but this method forces me to use a thumbnail. Is there no way around this?

[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

[ghost]

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, '*');
    });
  })
}

});

[glavrjk]

This works for me thank you

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, '*');
    });
  })
}

});

[paul-moers]

An edge case, but this is an issue for SVGs without width or height. When adding those with displayExistingFile an error is thrown from detectVerticalSquash on ctx.getImageData:

Index or size is negative or greater than the allowed amount

For this the createThumbnailFromUrl can be extended like this:

const createThumbnailFromUrl = dz.createThumbnailFromUrl;
// @ts-ignore - Dropzone has two types for createThumbnailFromUrl, but only the one with 7 argument in code.
dz.createThumbnailFromUrl = function (...args) {
  // Very lite version of the original createThumbnailFromUrl.
  // Without EXIF logic as this is not applicable to SVGs and causes errors for SVGs without width or height.
  if (args[0].type === 'image/svg+xml') {
    const file = args[0],
      callback = args[5],
      crossOrigin = args[6];
    if (!callback || !file.dataURL) return;
    const img = document.createElement('img');
    if (crossOrigin) {
      img.crossOrigin = crossOrigin;
    }
    img.onload = () => {
      callback(img); // Image instead of Canvas, like in the original createThumbnailFromUrl, seems to be fine.
    };
    img.onerror = callback;
    img.src = file.dataURL;
    return img.src;
  } else {
    // @ts-ignore - Type issue also due to multiple types for createThumbnailFromUrl.
    return createThumbnailFromUrl.apply(dz, args);
  }
};

With also an addition for SVGs to set the type before calling displayExistingFile:

const addDropzoneImages = (dropzone: Dropzone, images: string[]): void => {
  images.forEach((imageUrl) => {
    const name = getFilenameFromUrl(imageUrl);
    const mockFile: DropzoneMockFile = {
      name,
      size: 1,
      upload: {
        bytesSent: 1,
        progress: 1,
        total: 1,
        uuid: name,
      },
    };
    if (/\.svgz?$/.test(imageUrl)) {
      mockFile.type = 'image/svg+xml'; // To prevent error in Dropzone._enqueueThumbnail
    }
    dropzone.files.push(mockFile as DropzoneFile);
    dropzone.displayExistingFile(mockFile, imageUrl, undefined, 'anonymous');
  });
};

[denism300]

This is working for me, but now I'm facing that the css class "dz-success" is not being added to preview wrap.
My init fucntion:

let myDropzone = new Dropzone(
    '#someID', {
    .....
    init: function () {
    if (currentValue && (currentFiles = JSON.parse(currentValue))) {
            currentFiles.forEach(file => {
                const mockFile = {
                    name: file.name,
                    size: file.size,
                    accepted: true,
                };

                this.files.push(mockFile);
                this.displayExistingFile(mockFile, file.path, null, '*', false);
            });
        }
    }
});