Remove file from file upload javascript

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.

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

2. HTML

Create a

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

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

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.