dropzone js to link delete url with remove button

Question

In Dropzonejs i am creating delete button and then appending it to thumbnails, how can i link url which i am geeting from server directly to remove button by using addRemoveLinks:true ,

//Write function if you need to add some event after files added
      myDropzone.on("addedfile", function(file) {
        console.log('Files Added using ---------->'+$attrs.apiCall);
      var _this=this;
        /* Maybe display some more file information on your page */
       var removeButton = Dropzone.createElement("<button data-dz-remove>-Remove file</button>");
        removeButton.addEventListener("click", function(e) {
        e.preventDefault();
        e.stopPropagation();
        _this.removeFile(file);
        });
        file.previewElement.appendChild(removeButton);
      });

Answer 1

you can add delete link .. in Added file event ,you can get URL in Server response and set it in delete link.

 myDropzone.on("addedfile", function (file) {
     var _this = this;

     /* Maybe display some more file information on your page */
        var removeButton = Dropzone.createElement("<button data-dz-remove " +
                        "class='del_thumbnail btn btn-default'><span class='glyphicon glyphicon-trash'></span></button>");

        removeButton.addEventListener("click", function (e) {
        e.preventDefault();
        e.stopPropagation();
        var server_file = $(file.previewTemplate).children('.server_file').text();
        // Do a post request and pass this path and use server-side language to delete the file
        //          $.post(server_file,{'X-CSRFToken': $cookies.csrftoken}, 'json');
        $http({
            method: 'POSt',
            url: server_file,
            headers: {
                   'X-CSRFToken': $cookies.csrftoken
            }
        });
         _this.removeFile(file);
         });
         file.previewElement.appendChild(removeButton);
 });

Answer 2

This works with Dropzone 5.0.0

<script>
    Dropzone.options.dropzoneForm = {
        addRemoveLinks: true,
        dictDefaultMessage: "<strong>Drop files here or click to upload. </strong>",
        init: function() {
            this.on("complete", function(file) {
                $(".dz-remove").html("<div><span class='fa fa-trash text-danger' style='font-size: 1.5em'></span></div>");
            });
        }
    };
</script>

Answer 3

Add

addRemoveLinks: true,

then use the following inside

init: function () {}

When you click on dz-remove it goes to it's parent then looks for the text of the span element where the picture id is.

Using $ajax you send that imageId to your action and do what you want. Note: I'm using toastr here for user notifications.

$(".dz-remove").on("click", function (e) {
     e.preventDefault();
     e.stopPropagation();

     var imageId = $(this).parent().find(".dz-filename > span").text();

     $.ajax({
     url: "Your url here",
     data: { imageId: imageId},
     type: 'POST',
     success: function (data) {
          if (data.NotificationType === "Error") {
               toastr.error(data.Message);
          } else {
               toastr.success(data.Message);                          
          }},
          error: function (data) {
               toastr.error(data.Message);
          }
     })

});

Hope this helps you bro :)