Uploading Multiple Files Via Ajax - Dropzone - A simple Plugin

In the case of web developers, their araise many situations where your clients asked you to make multiple files to upload & also that via Ajax. So their are many plugins available for it. But When Iam working on my previous project, I got a nice plugin to do it. It's name is Dropzone.

You Just need to download file from this site  http://www.dropzonejs.com/

I will explain step by step how to use it:-

 Your html file uploading form will look like this :-

            <div id="dropzone">
                                <form action="upload.php" class="dropzone">
                                    <div class="fallback">
                                        <input name="file" type="file" multiple="" />
                                    </div>
                                </form>
                            </div>
<script src="assets/js/dropzone.min.js"></script> 

Please download dropzone.min.js from its site , I have given its link earlier.

Now include this code below the page:-

<script type="text/javascript">
            jQuery(function($){
           
            try {
              $(".dropzone").dropzone({
                paramName: "file", // The name that will be used to transfer the file
                maxFilesize: 0.5, // MB
             
                addRemoveLinks : true,
                dictDefaultMessage :
                '<span class="bigger-150 bolder"><i class="icon-caret-right red"></i> Drop files</span> to upload \
                <span class="smaller-80 grey">(or click)</span> <br /> \
                <i class="upload-icon icon-cloud-upload blue icon-3x"></i>'
            ,
                dictResponseError: 'Error while uploading file!',
               
                //change the previewTemplate to use Bootstrap progress bars
                previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-success progress-striped active\"><span class=\"bar\" data-dz-uploadprogress></span></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
              });
            } catch(e) {
              alert('Dropzone.js does not support older browsers!');
            }
           
            });
        </script>

This drop zone will work only in latest browsers. So Please make sure that You use updated browsers.

Then Next thing is that we have to create upload.php file, Which is given as the action for the file uploading form.


<?php

$ds          = DIRECTORY_SEPARATOR;  //1

$storeFolder = '../upload';   //2


if (!empty($_FILES)) {
$ext='';
  $photonam=$_FILES['file']['name'];
  $phot=explode('.',$photonam);
  $photoname=$phot[0];
$string=$photonam;
  $parts  = explode(".",$string);
       $ext   = strtolower($parts[count($parts)-1]);
       $savename="gal".substr(md5(rand(1111,9999)),0,8).".".$ext;
    
    $tempFile = $_FILES['file']['tmp_name'];          //3            
     
    $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds;  //4
    
    $targetFile =  $targetPath. $savename;  //5

    move_uploaded_file($tempFile,$targetFile); //6
}

?>
Now all files will be uploaded in your target folder.