Add ID to the preview div in Dropzone.js

I’m trying to add an id attribute to each file uploaded in Dropzone.js, So I can sort it later on.

This is my code:

Dropzone.options.pictureDropzone = {
  paramName: "file",
  addRemoveLinks: true,
  init: function() {
    this.on("success", function(file, response) {
        file.serverId = response.id;
        $(file.previewTemplate).find('.dz-preview').attr('id', "document-" + file.serverId);
    });
  }
};

The line

$(file.previewTemplate).find('.dz-preview').attr('id', "document-" + file.serverId);

Should add the id, but it does nothing. Tried it with prop() too.

If I choose a different element, it does work fine. for example, this works for .dz-details

$(file.previewTemplate).find('.dz-details').attr('id', "document-" + file.serverId);

But I cannot seem to find a way to add it to the dz-preview element.


The HTML structure looks like that:

<div class="dz-preview dz-processing dz-image-preview dz-success">
    <div class="dz-details"> ... </div>
    <div class="dz-progress"> ... </div>
    <div class="dz-success-mark"> ... </div>
</div>

Thank you for the help 🙂

Answer

this.on("success", function(file, response) {
    file.serverId = response.id;
    $(".dz-preview:last-child").attr('id', "document-" + file.serverId);
});