dropzonejs delete file on server manually one at a time

Question

I am working with dropzonejs to upload and remove multiple images on the server. On uploading multiple images working fine but on removing images one at a time causing me a problem. On clicking the remove link all the ajax function associate with images triggers simultaneously which results in deleting the all file rather then seleted file. How to distinguish the remove link from each associated image file???

jQuery(function () {
    var articleID = jQuery('#articleID').val();
    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone('#media-uploader', {
        url: "url?action=kl_upload_article_images",
        acceptedFiles: 'image/*',
        maxFilesize: 50,
        previewTemplate: $('#preview-template').html(),
        thumbnailHeight: 120,
        thumbnailWidth: 120,
        parallelUploads: 100,
        uploadMultiple: true,
        autoProcessQueue: false,
        addRemoveLinks: true,
        autoProcessQueue: false,
        init: function ()
        {
            dropZoneObject = this;
            //getting file name and directory to preview stored images in dropzonejs
            $.get("url?action=kl_edit_article_images&article_id=" + articleID, function (data)
            {
                //loopging through each data to preview images 
                $.each(data, function (key, value)
                {
                    var mockFile = {name: value.name, size: value.size};
                    dropZoneObject.emit("addedfile", mockFile);
                    var fileUrl = 'fileDirectory/'; ? > '+value.name;
                            dropZoneObject.emit("thumbnail", mockFile, fileUrl);
                    dropZoneObject.emit("complete", mockFile);
                    //@start of removing file
                    dropZoneObject.on("removedfile", function (file)
                    {
                        $.post("url?action=kl_delete_article_images&image_name=" + value.name + "&article_id=" + articleID);
                    });
                    //@end of removing file
                });
                dropZoneObject.on('sending', function (file, xhr, formData)
                {
                    formData.append('articleId', articleID);
                });
            });
        }
    });
});

score 3 · Accepted Answer · edited May 23 '17 at 12:02

Well somehow I have figure it out to delete file from server thanks to these questions link1 link2. I have posted the end result of my code. Hope it will help others.

jQuery( function() {
                var articleID         = jQuery('#articleID').val();
                Dropzone.autoDiscover = false;
                var myDropzone = new Dropzone('#media-uploader', {
                url: "url?action=kl_upload_article_images",
                acceptedFiles: 'image/*',
                maxFilesize : 50,
                previewTemplate: $('#preview-template').html(),
                thumbnailHeight: 120,
                thumbnailWidth: 120,
                parallelUploads: 100,
                uploadMultiple: true,
                autoProcessQueue: false,
                addRemoveLinks : true,
                autoProcessQueue : false,
                //removedfile is called whenever file is removed from the list 
                removedfile : function(file)
                {
                    var imageName = file.name;
                    var confirmation = confirm('Are you sure you want to delete this image?');
                    if(confirmation == true)
                    {
            //post request to remove file from server
                        $.post("url?action=kl_delete_article_images&image_name=" + imageName +"&article_id="+ articleID);
            //deleting thumbnails
                        var _ref;
                        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
                    }
                },
                init: function()
                {
                   dropZoneObject = this;
          //getting file name and directory to preview stored images in dropzonejs
                  $.get("url?action=kl_edit_article_images&article_id=" + articleID,function(data)
                  {
          //looping through each data to preview images 
                  $.each(data,function(key,value)
                   {
               var mockFile = {name:value.name,size:value.size};
               dropZoneObject.emit("addedfile", mockFile);
               var fileUrl = 'fileDirectory/';?>'+value.name;
               dropZoneObject.emit("thumbnail", mockFile, fileUrl);
               dropZoneObject.emit("complete", mockFile);
              });
          //end of loop

          dropZoneObject.on('sending', function(file, xhr, formData)
          {
               formData.append('articleId', articleID);
          });
           });
    }
});

dropzonejs delete file on server manually one at a time

1 Answers1