Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to upload and delete files from dropzone.js

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);      });   } 
like image 545
Aaru Avatar asked Oct 15 '13 07:10

Aaru


People also ask

How do I delete files from dropzone?

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.

How does dropzone JS work?

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.


1 Answers

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.

like image 52
6opko Avatar answered Sep 16 '22 13:09

6opko