Delete the uploaded file from Dropzone.js

With the Dropzone.js script you can easily implement drag and drop file upload functionality on your website.

But by default, it only allows file uploading with no file removal option.

For enabling the remove link following with the uploaded file preview require to explicitly initialize the dropzone and define the options.

Delete the uploaded file from Dropzone.js – PHP

Demo Download

Download and Include
HTML
CSS
Script
PHP
Demo
Conclusion

1. Download and Include

Download dropzone.js library from here.
Include dropzone.min.css and dropzone.min.js with the jQuery library at the <head> section.

<link href='dropzone.min.css' type='text/css' rel='stylesheet'>

<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src='dropzone.min.js' type='text/javascript'></script>

2. HTML

Create a <form class='dropzone' > and set its action='upload.php'.

Completed Code

<!doctype html>
<html>
 <head>
  <title>Delete the uploaded file from Dropzone.js - PHP</title>
  <!-- CSS -->
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="dropzone.min.css" rel="stylesheet" type="text/css">

  <!-- Script -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="dropzone.min.js" type="text/javascript"></script>
 </head>
 <body >
  <div class="container" >
   <div class='content'>
    <form action="upload.php" class="dropzone" id="dropzonewidget">
 
    </form> 
   </div> 
  </div>
 </body>
</html>

3. CSS

Create style.css file.

Completed Code

.container{
 margin: 0 auto;
 width: 50%;
}

.content{
 padding: 5px;
 margin: 0 auto;
}
.content span{
 width: 250px;
}

.dz-message{
 text-align: center;
 font-size: 28px;
}

4. Script

Explicitly initialize using dropzone() method and for enabling remove file add addRemoveLinks: true and removefile options.

Send AJAX request from the removedfile function where get the file name using the file.name and pass in the AJAX as data.

At the end call –

var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;

to remove the thumbnail from the dropzone container.

Completed Code

Dropzone.autoDiscover = false;
$(".dropzone").dropzone({
 addRemoveLinks: true,
 removedfile: function(file) {
   var name = file.name; 
   
   $.ajax({
     type: 'POST',
     url: 'upload.php',
     data: {name: name,request: 2},
     sucess: function(data){
        console.log('success: ' + data);
     }
   });
   var _ref;
    return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
 }
});

5. PHP

Create a upload.php file and a upload directory.

If $request == 1 then store file to upload directory and
If $request == 2 then remove the file from the server according to the $_POST['name'] value.

Completed Code

<?php
$target_dir = "upload/"; // Upload directory

$request = 1;
if(isset($_POST['request'])){ 
  $request = $_POST['request'];
}

// Upload file
if($request == 1){ 
  $target_file = $target_dir . basename($_FILES["file"]["name"]);
  $msg = ""; 
  if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_dir.$_FILES['file']['name'])) {
    $msg = "Successfully uploaded"; 
  }else{    
    $msg = "Error while uploading"; 
  } 
  echo $msg;
  exit;
}

// Remove file
if($request == 2){ 
  $filename = $target_dir.$_POST['name'];  
  unlink($filename); 
  exit;
}

6. Demo

View Demo

7. Conclusion

Use addRemoveLinks: true option to enable remove link and handle it with removedfile option function by sending AJAX request to delete the file from the server.

If you found this tutorial helpful then don't forget to share.

Contents

1. Download and Include

2. HTML

3. CSS

4. Script

5. PHP

6. Demo

7. Conclusion