If you are looking to upload and remove file using Dropzone JS, then you are at the right place. Here we explained a simple example of dropzone js to upload and remove file with ajax request.
To remove files, Dropzone provide addRemoveLinks and removedfile options where you can allow delete file link.
Files we need to create:
- index.php
- uploadFile.php
Let’s check it step by process to upload and remove files in Dropzone Js.
Step 1: First create a index.php file, initialize dropzone plugin in it.
We have created dummy file upload form using with bootstrap css and dropzone library files, here you can upload multiple files.
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html> <head> <title>How to Delete Uploaded File in Dropzone JS?</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/dropzone.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.2.0/min/dropzone.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <h3>Upload and Delete Files in Dropzone JS - Codefixup.com</h3> <form action="uploadFile.php" enctype="multipart/form-data" class="dropzone" id="image-upload"> <input type="hidden" name="request" value="addFile"> <div> <h4>Upload Multiple Files</h4> </div> </form> </div> </div> </div> <script type="text/javascript"> Dropzone.autoDiscover = false; var FileDropzone = new Dropzone(".dropzone", { maxFilesize: 5, //set file upload size acceptedFiles: ".jpeg,.jpg,.png,.gif", // accepted files format addRemoveLinks: true, removedfile: function(file) { var fileName = file.name; $.ajax({ type: 'POST', url: 'uploadFile.php', data: {name: fileName,request: 'remove'}, sucess: function(data){ console.log('success: ' + data); } }); var _ref; return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0; } }); </script> </body> </html> |
Step 2: Next, we have to create uploadFile.php file to add file upload and remove functionality.
Also create a folder with the name of ‘uploadedFiles’ to store uploaded files.
uploadFile.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php $uploadDir = 'uploadedFiles'; if ($_POST['request'] == "addFile") { if (!empty($_FILES)) { $tmpFile = $_FILES['file']['tmp_name']; $filename = $uploadDir.'/'.$_FILES['file']['name']; move_uploaded_file($tmpFile,$filename); } } if ($_POST['request'] == "remove") { $fileName = $uploadDir.'/'.$_POST['name']; unlink($fileName); } ?> |
That’s it, your file upload and remove using Dropzone js is ready to use. Check below demo..
Live Demo
