Delete the uploaded file from Dropzone.js – PHP

Last updated on by

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

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

19 thoughts on “Delete the uploaded file from Dropzone.js – PHP”

  1. 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!

    Reply

  3. 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!!

    Reply

  4. Yogesh Singh
    Thanks for this great post,i have copied all of your code,image upload works fine,but i am unable to display Cancel and Remove option,though i have jquery added along with dropzone.js

    Reply

  5. Hello Yogesh Singh,
    Could you help me.
    I want to preview my uploaded pictures. How can i bring it back to remove or adding from your AJAX script?
    Thank you for your help.

    Reply

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

    there’s a missing question mark (?) between null and _ref that’s why the Remove File text doesn’t appear

    Reply

Leave a Comment

© 2016-2026 Makitweb, All rights reserved