Skip to content

Dropzone.js – 2 [deleting files]

Humans make mistakes, It’s their default behavior. It is possible that while uploading files people will upload unnecessary images and later they will want to delete those.

In our previous version of dropzone test project, We only uploaded files. We were unable to delete those files. Lets implement this feature.

So, an extra javascript added to the <script> tag to be able to delete the files.

  <script>
    Dropzone.autoDiscover = false;
    $( document ).ready(function() {
      var myDropzone = new Dropzone("form#demo_upload", {
        addRemoveLinks: true, 
        removedfile: function(file) {
          var name = file.name;  
          $.ajax({
            type: 'POST',
            url: 'delete.php',
            data: {name: name},
            sucess: function(data){
                console.log('success: ' + data);
            }
          });
          var _ref;
            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
        }
      });
    });
  </script>

An extra php file (delete.php) is added to handle the file delete actions on server side.

<?php
$target_dir = "upload/";
$filename = $target_dir.$_POST['name'];  
unlink($filename); 
exit;
?>
Leave a Reply

Your email address will not be published. Required fields are marked *