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.
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.
[button_round color=”blue” url=”infotuts.com/demo/remove-file-dropzonejs/download.html”] Download Code [/button_round] [button_round color=”blue” url=”infotuts.com/demo/remove-file-dropzonejs”] Live Demo [/button_round]
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.
Comments
47 responses to “Delete Uploaded file in Dropzone.Js”
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?
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
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.
Hi Arzon,
Please download your file. Your email has been activated in our DB.
Thanks:
Sanjeev
I also have the same problem. please help me. Thank you very much.
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
You save my life XD great tutorial
I have a problem in the first tutorial, I renamed the file with time (), but now can not remove it
Hi Sanjeev,
i subscribed 2 days back….still my email is not registered.
is that page working ..???
Yeah thats working, please get your file now
Hi,Sanjeev
I have already subscribe but can’t download the code.
hey now it working and code is downloaded.
Thank You.
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
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.
Hi, I just subscribed but can not download the files.
Please fix.
Thanks.
I did subscribe but still cant download the file 🙁
Hello, I just subscribed but I can’t download the files. could you activate my email?
Thanks
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.
I did register but i see message as “Sorry, We dont have your email. Please
Hello Sanjeev,
Email is Activated.
Many thanks For your time.
Regards,
Bhargav
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) });
}
}
i want to it help me
Hi,
Please get your file now.
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!
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.
Please get your file. List has been refreshed.
Thanks:
Sanjeev
Hi Sanjeev,
Very good tutorial bit 12 hrs to wait for download this is really upset.
please refresh, i can’t download
Hi,
Please can you activate my mail-address so that i can download the code..its urgent so please do needful…
Thanks,
Rohit
Hi Guys,
Email list was updated. Please get your files.
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.
Hello:
Can you help me to activate my email, so i can download the code!
Thanks!!!!
Email list has been updated. Please download your file.
Thanks:
Sanjeev
Registered 24 hrs ago still showing not yet subscribed
my id is shashankaushik100@gmail.com
Hi Shashank,
Please download now.
Thanks:
Sanjeev
showing server responded with code 0 what to do??
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
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
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.
Registered 2 days ago still showing not yet subscribed
my id is pimnada2014@gmail.com
gracias pim pimnada2014@gmail.com
Registered 1 days ago still showing not yet subscribed
Hi Sani,
Please download your file now.
Thanks a lot..
Now i downloading this demo and i need this demo asap..
thanks..
Hello,
I just subscribed, but i can’t download the code. Can you please help me also?
Thanks,
Stefan Paul
Go here to download complete code dropzonejs
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 !