dropzonejs delete file on server manually one at a time

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