How to create drag and drop multiple file upload in PHP using DropzoneJS. In this tutorial you’ll learn about how to build multiple file upload feature using DropzoneJs.
DropzoneJS is highly customizable, an open source library that provides drag’n’drop file uploads with image previews.
In this tutorial, i’ll show you how to use DropzoneJs to create nice drag and drop file upload feature.
Top websites to learn coding online.
Create Drag and Drop Multiple File Upload using DropzoneJS
To use DropzoneJS first download and include it’s CSS and Js.
Now let’s create a form and you are done. For using this library you just need to write minimal code and rest everything is included by DropzoneJS.
|
1 2 3 4 5 6 7 8 9 10 11 |
<form action="example.php" method="post" class="dropzone" id="my-awesome-dropzone" enctype="multipart/form-data"> <div class="dropzone-previews"></div> <div class="fallback"> <input name="file" type="file" multiple/> </div> </form> <button type="submit" id="submit-all" class="btn btn-primary btn-xs">Upload the file</button> |
We have written the html code. Let’s write PHP code to handle multiple upload as this library doesn’t handle server-side implementation. This short PHP snippet upload the file in images folder. You can upload this file in any folder you want.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Multiple file upload foreach($_FILES['file']['name'] as $index=>$name){ $filename = $name; if(!file_exists("images/".$filename)){ move_uploaded_file($_FILES["file"]["tmp_name"][$index],"images/" . $filename); } } |
Learn PHP Programming Online : Video Tutorials .
DropzoneJS is highly customizable so you can easily customize it’s behaviour.
|
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 |
<script type="text/javascript"> // The camelized version of the ID of the form element Dropzone.options.myAwesomeDropzone = { // set following configuration autoProcessQueue: false, uploadMultiple: true, parallelUploads: 10, maxFiles: 10, addRemoveLinks: true, previewsContainer: ".dropzone-previews", dictRemoveFile: "Remove", dictCancelUpload: "Cancel", dictDefaultMessage: "Drop the images you want to upload here", dictFileTooBig: "Image size is too big. Max size: 10mb.", dictMaxFilesExceeded: "Only 10 images allowed per upload.", acceptedFiles: ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF", // The setting up of the dropzone init: function() { var myDropzone = this; // Upload images when submit button is clicked. $("#submit-all").click(function (e) { e.preventDefault(); e.stopPropagation(); myDropzone.processQueue(); }); // Refresh page when all images are uploaded myDropzone.on("complete", function (file) { if (myDropzone.getUploadingFiles().length === 0 && myDropzone.getQueuedFiles().length === 0) { window.location.reload(); } }); } } </script> |
Check complete DropzoneJS configuration and customize them as per your need.
Conclusion
I have used DropzoneJS library for creating multiple file upload feature and found to be great in terms of UI,customization and everything. If you want to add something please let me know through comments.
