delete file thumbnail from dropzone - php

Question

Below is the code which I use to upload images through dropzone.
<script>
Dropzone.options.uploaddeadlineimages = {
// The camelized version of the ID of the form element
// The configuration
paramName: 'files',
url:"<?=base_url()."Product/upload_listing_images";?>",
dictDefaultMessage: "<img src='<?=base_url()."public/images/";?>/frontend/camera-black.png'><h2>Drag and drop your photos here to upload</h2><p><a href='javascript:void(0)'>Or Click here to browse for photos</a></p>",
uploadMultiple: false,
createImageThumbnails: true,
addRemoveLinks: true,
parallelUploads:100,
dictInvalidFileType:'Please upload only valid file type(png,jpg,gif,pdf)',
clickable:true,
maxFiles:100,
autoProcessQueue: true,
success: function( file, response ) {
var return_value = response;
var old_value = $('#listing_images').val();
if(old_value=="" || old_value==" " || old_value==null){
var new_value = return_value;
}else{
var new_value = old_value+","+return_value;
}
$('#listing_images').val(new_value);
},
// The setting up of the dropzone
init: function() {
var myDropzone = this;
//alert after success
this.on('queuecomplete', function( file, resp ){
//alert('hahahahahaha');
});
// First change the button to actually tell Dropzone to process the queue.
document.getElementById("create_listing_button").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
});
this.on("successmultiple", function(files, response) {
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.
});
this.on("errormultiple", function(files, response) {
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
}
}
</script>
the code has this parth which is used to append the new filename into hidden field so that i can save those names in database then. but the problem is that when i click on delete button i need to delete the name of that file from the hidden field too. I am getting an encrypted name from the server.
success: function( file, response ) {
var return_value = response;
var old_value = $('#listing_images').val();
if(old_value=="" || old_value==" " || old_value==null){
var new_value = return_value;
}else{
var new_value = old_value+","+return_value;
}
$('#listing_images').val(new_value);
},
I don't need the exact code. I just need a method by which i can pass the new filename to a function when i click on delete button. this should not prevent the delete from doing it default function

Answer 1

well i found an answer . just update the success part according to your need. but as in my case i needed the image name as id of preview element. it will be done in this way.
success: function( file, response ) {
var return_value = response;
var old_value = $('#listing_images').val();
if(old_value=="" || old_value==" " || old_value==null){
var new_value = return_value;
file.previewElement.id = response;
}else{
file.previewElement.id = response;
var new_value = old_value+","+return_value;
}
$('#listing_images').val(new_value);
},
to change the value of list after delete button just add the following code in dropzone.js file(just the way i did it).
the code starts from line number 274. just change it from this
removeFileEvent = (function(_this) {
return function(e) {
e.preventDefault();
e.stopPropagation();
if (file.status === Dropzone.UPLOADING) {
return Dropzone.confirm(_this.options.dictCancelUploadConfirmation, function() {
return _this.removeFile(file);
});
} else {
if (_this.options.dictRemoveFileConfirmation) {
return Dropzone.confirm(_this.options.dictRemoveFileConfirmation, function() {
return _this.removeFile(file);
});
} else {
return _this.removeFile(file);
}
}
};
})(this);
_ref2 = file.previewElement.querySelectorAll("[data-dz-remove]");
_results = [];
for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
removeLink = _ref2[_k];
_results.push(removeLink.addEventListener("click", removeFileEvent));
}
return _results;
}
},
to this(just four lines added. do it carefully, otherwise you can mess up all)
removeFileEvent = (function(_this) {
return function(e) {
e.preventDefault();
e.stopPropagation();
if (file.status === Dropzone.UPLOADING) {
return Dropzone.confirm(_this.options.dictCancelUploadConfirmation, function() {
return _this.removeFile(file);
});
} else {
if (_this.options.dictRemoveFileConfirmation) {
return Dropzone.confirm(_this.options.dictRemoveFileConfirmation, function() {
var id = $(this).closest("div").prop("id");
update_img_list(id);
return _this.removeFile(file);
});
} else {
var id = $(this).closest("div").prop("id");
update_img_list(id);
return _this.removeFile(file);
}
}
};
})(this);
_ref2 = file.previewElement.querySelectorAll("[data-dz-remove]");
_results = [];
for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
removeLink = _ref2[_k];
_results.push(removeLink.addEventListener("click", removeFileEvent));
}
return _results;
}
},
add this function at the end of file change ('#listing_images') to ('#id_of_your_field_which_contains_the_list')
function update_img_list(id){
var list = $('#listing_images').val();
separator = ",";
var values = list.split(separator);
for(var i = 0 ; i < values.length ; i++) {
if(values[i] == id) {
values.splice(i, 1);
$('#listing_images').val(values.join(separator)) ;
}
}
return list;
}