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 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;
}

// 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.

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

Related Post

Spread the love
  • 1
  •  
  •  
  •  
  •  
  •  

10 Comments

  1. Mathias said:

    I have the problem, that files > 2MB aren’t working to upload.
    Is ther a possibility to import the already uploaded pictures from the uploads folder?
    Thank you for your help!

    January 3, 2018
    Reply
    • Yogesh Singh said:

      I think in your php.ini file the values of post_max_size and upload_max_filesize is set to 2M because of this files are not upload.
      You need to update post_max_size and upload_max_filesize values in php.ini and restart your server.
      ini_set(‘post_max_size’, ’64M’);
      ini_set(‘upload_max_filesize’, ’64M’);

      January 3, 2018
      Reply
  2. harshi said:

    I used this but not working. How I apply remove file text

    July 7, 2018
    Reply
    • Yogesh Singh said:

      Include jQuery library before dropzone.min.js file then it will work.

      July 7, 2018
      Reply
      • muhammad aiyub said:

        how to delete images from db from remove function dropzone

        July 10, 2018
        Reply
        • Yogesh Singh said:

          You need to execute a delete query from the PHP script to remove the image from the table.

          July 10, 2018
          Reply
          • muhammad aiyub said:

            how to get the id table ?

            July 11, 2018
          • Yogesh Singh said:

            Use filename for deleting the record.

            July 11, 2018
  3. Will said:

    Hello
    where shoud I exactly write the completed code in drozone.js? I put it in the end but it doesn’t work.
    At line 372 in dropzone.js there’s already “addRemoveLinks: false”, what shoud I do with?
    Please help!!

    September 2, 2018
    Reply
    • Yogesh Singh said:

      You need to add the Script code after <form > between <script > tag not in dropzone.js file.

      September 3, 2018
      Reply

Leave a Reply

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