Delete the uploaded file from Dropzone.js – PHP

With 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 remove 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


Contents

  1. Download and Include
  2. HTML
  3. CSS
  4. Script
  5. PHP
  6. Demo
  7. Conclusion

1. Download and Include

  • Download dropzone.js library from here.
  • Include dropzone.css and dropzone.js with jQuery library at the <head> section.
<link href='dropzone.css' type='text/css' rel='stylesheet'>

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

2. HTML

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

Completed Code

<!doctype html>
<html>
 <head>
  <!-- CSS -->
  <link href="style.css" rel="stylesheet" type="text/css">
  <link href="dropzone.css" rel="stylesheet" type="text/css">

  <!-- Script -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="dropzone.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 new 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 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;
}

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

6. Demo

Drag and drop the file to upload section.


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.

Related Post

Spread the love

Be First to Comment

Leave a Reply

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