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
- Download and Include
- HTML
- CSS
- Script
- PHP
- Demo
- Conclusion
1. Download and Include
- Download dropzone.js library from here.
- Include
dropzone.min.css
anddropzone.min.js
with the jQuery library at thesection.
2. HTML
Create a and set its
action='upload.php'
.
Completed Code
Delete the uploaded file from Dropzone.js - PHP
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 toupload
directory and - If
$request == 2
then remove the file from the server according to the$_POST['name']
value.
Completed Code