Add ID to the preview div in Dropzone.js

Question

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 :)

Solution 1

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

Solution 2

I know this is old but if anyone is still looking for the answer: -

      this.on("success", function(file, response) {
          file.previewElement.id = response.id;
      });

Solution 3

Cast the previewElement into jQuery object and perform any action.

   this.on("success", function(file, response) {
      $(file.previewElement).attr("id", response.id);
  });

Solution 4

I had similar problem but tried it through declaring a variable in javascript ,following is code :

$("#fileUpload${dropdown}").dropzone(
                {

                    url : "uploadAdditionalFile?name="+$("#fileUpload${dropdown} div:first-child").prop('id'),
                    addRemoveLinks : true,
                    maxFiles : 1,
                    init : function() {
                        var imageId = $("#fileUpload${dropdown} div:first-child").prop('id');
                        this.on("maxfilesexceeded",
                            function(file) {
                                    alert("Only one file can be uploaded at a time");
                                    this.removeFile(file);
                                        });
                                this.on("addedfile",
                                        function(file) {
                                            switch (file.type) {
                                            case 'application/pdf':
                                                this.emit("thumbnail",file,"/sbms/static/img/pdf.png");
                                                break;
                                            case 'application/msword':
                                                this.emit("thumbnail",file,"/sbms/static/img/word.png");
                                                break;
                                            }
                                        }
                                );
                                 this.on('removedfile', function(file){
                                     $.ajax({
                                            type : "GET",
                                            url : "removeAdditionalMediaPreviewForm?id="+imageId,
                                            dataType : "json",
                                            async : false,
                                            success : function(response) {
                                                if (response.status == 'SUCCESS') {
                                                    alert("File removed successfully.")
                                                }else {
                                                    alert("File not removed successfully.")
                                                }
                                            }
                                        });
                                }); 

                    },

                    success : function(file,response) {
                        var imgName = response;
                        file.previewElement.classList.add("dz-success");
                        console.log("Successfully uploaded :"+ imgName);
                    },
                    error : function(file,response, xhr) {
                        alert("Unable to upload file. Please check if it is a valid doc or pdf file.");
                        this.removeFile(file);
                    }
                });

imageId is a variable which stores the id and is used later on while file remove.

View more solutions

Comments

[Szczepan Hołyszewski]

This will fail spectacularly if the user drops multiple files.

[Dmitri Chebotarev]

The library doesnt seem to support access to the actual underlaying jQuery objects. Adding attributes to the file object can be achieved with another eventlistener: pastebin.com/p0DCdTrf

[Bira]

file.serverID = response.id I used it this way

[Ray Coder]

How about multiple files?

[Ray Coder]

So how to make it for multiple files? @SzczepanHołyszewski

[Ray Coder]

How to take it from removedfile? @Bira