I have used the below code the image has been deleted but the thumbnail image still showing.
Dropzone.options.myDropzone = { init: function() { this.on("success", function(file, response) { file.serverId = response; }); this.on("removedfile", function(file) { if (!file.serverId) { return; } $.post("delete-file.php?id=" + file.serverId); }); }
Methods - Dropzone. If you want to remove an added file from the dropzone, you can call . removeFile(file) . This method also triggers the removedfile event.
Dropzone. js is 'a light weight JavaScript library that turns an HTML element into a "dropzone"'. Users can drag and drop a file onto an area of the page, uploading to a server. If you would like to read more how all of this works skim through the Dropzone.
For deleting thumbnails you have to enable addRemoveLinks: true, and to use "removedfile" option in dropzonejs
removedfile: Called whenever a file is removed from the list. You can listen to this and delete the file from your server if you want to.
addRemoveLinks: true, removedfile: function(file) { var _ref; return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; }
I also added an ajax call for delete script and it looks like this:
addRemoveLinks: true, removedfile: function(file) { var name = file.name; $.ajax({ type: 'POST', url: 'delete.php', data: "id="+name, dataType: 'html' }); var _ref; return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; }
It works on my side, so I hope it helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With