Multiple File Upload in PHP using DropzoneJS – Drag and Drop

Multiple File Upload in PHP using DropzoneJS – Drag and Drop

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.

Create Drag and Drop Multiple File Upload using DropzoneJS

To use DropzoneJS first download and include it’s CSS and Js.

Download Dropzone js

Download CSS file

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.

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

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

DropzoneJS is highly customizable so you can easily customize it’s behaviour.

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

Author Surjit Sidhu

Surjit SidhuSurjit is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling.