Delete Uploaded file in Dropzone.Js

Guys we have already posted tutorials on drag drop file upload using DropZone.js and then How to submit uploaded file to Database in DropZone.js. Both the tutorials are getting good response from our awesome readers like you. The only option left was how to remove file from upload folder in server and delete file entry from database. We got a lot of comments and emails from people to write a tutorial on removing file in DropZone.js.  This tutorial is dedicated to you guys who want to remove an uploaded file directly from the uploader screen by clicking on remove button.

multiple file uploader

I recommend you to go through my previous tutorial to set up the database. In downloaded file you will get same database file. ‘file_upload’ table to store file information.

table file upload

Download Code     Live Demo

So the first configuration you will have to do is to set the addRemoveLinks: true in your dropzone.js file (this will add remove link to preview thumbnail of every uploaded file). In our previous tutorial we were uploading file to server and saving its path in database. In this tutorial when you will click on remove icon the uploaded file will be immediately deleted from the server directory as well as from database.

You can download the code and set it up on your local machine and see how smoothly it works. Lets see how we can easily configure our Dropzone.js and add file removal feature in it. I added a function deletefile which calls delete.php file and passes fid (file id) to be deleted. Below is the function’s code:

</p>
function deletefile(value)
{
var xmlhttp;
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
 alert(xmlhttp.responseText);
 }
 }
xmlhttp.open("GET","delete.php?fid="+value,true);
xmlhttp.send();
}
<p style="text-align: justify;">

You can look at Dropzone.js file and see we have added a function call to deletefile() and received responseText in fid which was passed to deletefile() function. So there are changes to Dropzone.js file so we recommend to download the file and use it. Below is our simple code of delete.php file.

</p>
include 'db.php';
$upload_dir = 'myuploads';
$targetPath = dirname( __FILE__ ) . DIRECTORY_SEPARATOR . $upload_dir . DIRECTORY_SEPARATOR;
unlink($targetPath.$_GET['fid']);
$obj=new DB();
$sql = "DELETE FROM file_upload WHERE f_name='".$_GET['fid']."'";
$retval = mysqli_query($obj->connection(),$sql);
print_r("Successfully deleted.");
<p style="text-align: justify;">

That’s it. Now you can easily allow users to upload files to your server and if wrong file is uploaded they can remove it immediately. Thanks and kudos to Dropezone.js for providing such an awesome library. I hope you guys will love this tutorial and share it with fellow developers.

47 thoughts on “Delete Uploaded file in Dropzone.Js”

  1. I did register but i see message as “Sorry, We dont have your email. Please Subscribe Below”.

    Looks like this is happening to all your posts. Can you pls fix this ASAP?

    1. Hi Sai,

      Email list has been updated. You can get your file with your email id now. We refresh email list every 12 hours, soon we will migrate to realtime downloading system.

      Thanks:
      Sanjeev

  2. I did Subscribe but I can’t download it. it is showing the same message
    “Sorry, We dont have your email. Please Subscribe Below”.
    Please help.

  3. Hi Sanjeev

    Thanks for the tutorial.

    I think am having problems with my folder permissions, I am getting the ‘permission denied’ error.

    Could you please advise what I can add to the delete file to fix this?

    Regards
    Brad

  4. I have a problem in the first tutorial, I renamed the file with time (), but now can not remove it

  5. Hi,

    I do have a problem, I already subscribe to your site but still I cant download your file, please help me solve this problem.

    Thanks

  6. Hello
    I am unable to upload file(Image) using ” Ajax table – Add Edit
    Delete Rows Dynamically Using jQuery PHP” code.Please add the input
    type=”file” field in this code.
    All others are very fantastic. Thanx
    I hope i will get reply soon.

  7. Great tutorial! I will be using this on crm i am creating. Thank you so much. I was wondering how to keep track of max files in dropzone file count.

    Thanks again.

  8. dropzone source code should not be changed, you could use dropzone option and add attach your function to event

    i.e.

    Dropzone.options.fileDropzone = {
    init: function() {
    this.on(“removedfile”, function(file) { deletefile(file) });
    }
    }

  9. Sir, Thanks for you time and effort on this package!! I have one question.. i use the base script with mysql table – and added there a option that new folder for each group of images will be created or added images to existing folder. But also i’d need to resize and water mark the uploaded images. This seems to be really difficult could you please assist on this matter? Thanks and Happy Holiday Season!

  10. I did Subscribe but I can’t download it. it is showing the same message
    “Sorry, We dont have your email. Please Subscribe Below”.
    Please help.

  11. Hi,

    Please can you activate my mail-address so that i can download the code..its urgent so please do needful…

    Thanks,
    Rohit

  12. Hello!
    First I would like to congratulate you for the tutorials available here ! In Brazil is scarce such material .
    Anyway, I’m not able to download the files , please could check out what is happening can ?

    Sorry for the English , I used the google translator because my English: is bad.

  13. showing 0 code problem solved instead when i drag and drop nothing happens my file-upload.php is not being triggered

    and also there is nothing inside the form how is it supposed to trigger the php file

  14. earlier problem solved instead when i drag and drop nothing happens my file-upload.php is not being triggered

    and also there is nothing inside the form how is it supposed to trigger the php file

  15. Hey awesome tutorial. Thank you for supplying this to the community. I have everything running great except for 2 issues.

    #1 : When a user wants to delete a file I don’t want any popups saying the file was deleted. How do I remove that?

    #2 : I set it so users can only upload images. If a users uploads a php file or something other than an image I get the nice notice that displays you can not upload this type of file. The user will try and click the remove button, but when they do so an error pops up and the user cannot remove the file. Can you help fix this?

    I would greatly appreciate the help on the two issues I’m having.

  16. Hello,
    I just subscribed, but i can’t download the code. Can you please help me also?

    Thanks,
    Stefan Paul

  17. I’m uploading my image after I’m Changing my image name on server
    and I can’t take name the changing image, How can I get the name changed image ? For Remove !

Comments are closed.