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);
});
});
}
});
});