Dropzone.js- How to delete files from server?

Question

I am using dropzone.js. When I try to delete files only the thumbnails get deleted but not the files from server. I tried some ways but it just gives me the name of the image which was on client side and not the name on server side(both names are different, storing names in encrypted form).

Any help would be much appreciated..

Answer 1

Another way,

Get response from your server in JSON format or a plain string (then use only response instead of response.path),

dropzone.on("success", function(file, response) {
  $(file.previewTemplate).append('<span class="server_file">'+response.path+'</span>');
});

Here, the server can return a json like this,

{
    status: 200,
    path: "/home/user/anything.txt"
}

So we are storing this path into a span that we can access when we are going to delete it.

dropzone.on("removedfile", function(file) {
  var server_file = $(file.previewTemplate).children('.server_file').text();
  alert(server_file);
  // Do a post request and pass this path and use server-side language to delete the file
  $.post("delete.php", { file_to_be_deleted: server_file } );
});

After the process, the preview template will be deleted by Dropzone along with file path stored in a span.

Answer 2

Most simple way

JS file,this script will run when you click delete button

this.on("removedfile", function(file) {
alert(file.name);

$.ajax({
url: "uploads/delete.php",
type: "POST",
data: { 'name': file.name}
});


});

php file "delete.php"

<?php
$t= $_POST['name'];
echo $t;
unlink($t); 
?>