Assign files server id in dropzone.js

Question

With using dropzone.js I'm uploading images for my slider. When I upload a file to the server, response is only a number corresponding to image/file database id. If there is a list of files, there is a list of id's as response. now I want to assign this id to dropzone files for some purpose.

Answer 1

There is a success event that fires when a file is uploaded, attach to that, sample code below ( this being dropzone reference)

this.on("success",
    function(file, responseStr) {
        console.log(responseStr);
        var responseObj = JSON.parse(responseStr);
        if (responseObj.success) {
            // save response for later processing
            file.additionalInfo = responseObj;
        } else {
            var message = responseObj.message;
            file.previewElement.classList.add("dz-error");
            file.status = Dropzone.ERROR;
            var els = file.previewElement.querySelectorAll("[data-dz-errormessage]");
            for (var i = 0; i < els.length; i++) {
                els[i].textContent = message;
            }
        }
});

Answer 2

For multiple files you can use the "multilefiles" event provided by dropzone, or just iterate through the response for each file as below:

                           this.on("success", function (file, response)
                            {
                                // if multiple files are saved the response returns all the documents
                                // but dropzone will fire the success event per file
                                // find the corresponding document based on name
                                if (response != null && response.Documents != null)
                                {
                                    var d = response.Documents.find(x => x.FileName ==  file.name);
                                    refresh = true;
                                    dropZone.emit("thumbnail", file, d.ThumbnailBase64);
                                }

                            });

Answer 3

On success set Preview "id" attribute

myDropzone.on("success", function(file,data) {
    let myfile = file.previewTemplate;
    myfile.setAttribute('id',data.server_data.id);
});

on delete action get this id

myDropzone.on("removedfile", function(file) {

    var server_file = $(file.previewTemplate);
    var id = server_file.attr("id");
    $.ajax({
        url: your url,
        type: "DELETE",
        data: { "_token":_token,'id':id },
        success: (data) => {
        console.log(data);
        },
        error: function(data){
        console.log(data);
        }
    });
});