HTML5 Drag and Drop Multiple File Uploader

//test

## HTML5 Drag and Drop Multiple File Uploader

            [Back to original tutorial on <span>Script Tutorials</span>](http://www.script-tutorials.com/html5-drag-and-drop-multiple-file-uploader/)

        <div class="container">
            <div class="contr">

## Drag and Drop your images to 'Drop Area' (up to 5 files at a time, size - under 256kb)

</div>
            <div class="upload_form_cont">
                <div id="dropArea">Drop Area</div>

                <div class="info">
                    <div>Files left: <span id="count">0</span></div>
                    <div>Destination url: <input id="url" value="http://www.script-tutorials.com/demos/257/upload.php"></div>

## Result:

                    <div id="result"></div>
                    <canvas width="500" height="20"></canvas>
                </div>
            </div>
        </div>

//script.js
// variables
var dropArea = document.getElementById('dropArea');
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
var count = document.getElementById('count');
var destinationUrl = document.getElementById('url');
var result = document.getElementById('result');
var list = [];
var totalSize = 0;
var totalProgress = 0;

// main initialization
(function(){

    // init handlers
    function initHandlers() {
        dropArea.addEventListener('drop', handleDrop, false);
        dropArea.addEventListener('dragover', handleDragOver, false);
    }

    // draw progress
    function drawProgress(progress) {
        context.clearRect(0, 0, canvas.width, canvas.height); // clear context

        context.beginPath();
        context.strokeStyle = '#4B9500';
        context.fillStyle = '#4B9500';
        context.fillRect(0, 0, progress * 500, 20);
        context.closePath();

        // draw progress (as text)
        context.font = '16px Verdana';
        context.fillStyle = '#000';
        context.fillText('Progress: ' + Math.floor(progress*100) + '%', 50, 15);
    }

    // drag over
    function handleDragOver(event) {
        event.stopPropagation();
        event.preventDefault();

        dropArea.className = 'hover';
    }

    // drag drop
    function handleDrop(event) {
        event.stopPropagation();
        event.preventDefault();

        processFiles(event.dataTransfer.files);
    }

    // process bunch of files
    function processFiles(filelist) {
        if (!filelist || !filelist.length || list.length) return;

        totalSize = 0;
        totalProgress = 0;
        result.textContent = '';

        for (var i = 0; i < filelist.length="" &&="" i="">< 5;="" i++)="" {="" list.push(filelist[i]);="" totalsize="" +="filelist[i].size;" }="" uploadnext();="" }="" on="" complete="" -="" start="" next="" file="" function="" handlecomplete(size)="" {="" totalprogress="" +="size;" drawprogress(totalprogress="" totalsize);="" uploadnext();="" }="" update="" progress="" function="" handleprogress(event)="" {="" var="" progress="totalProgress" +="" event.loaded;="" drawprogress(progress="" totalsize);="" }="" upload="" file="" function="" uploadfile(file,="" status)="" {="" prepare="" xmlhttprequest="" var="" xhr="new" xmlhttprequest();="" xhr.open('post',="" destinationurl.value);="" xhr.onload="function()" {="" result.innerhtml="" +="this.responseText;" handlecomplete(file.size);="" };="" xhr.onerror="function()" {="" result.textcontent="this.responseText;" handlecomplete(file.size);="" };="" xhr.upload.onprogress="function(event)" {="" handleprogress(event);="" }="" xhr.upload.onloadstart="function(event)" {="" }="" prepare="" formdata="" var="" formdata="new" formdata();="" formdata.append('myfile',="" file);="" xhr.send(formdata);="" }="" upload="" next="" file="" function="" uploadnext()="" {="" if="" (list.length)="" {="" count.textcontent="list.length" -="" 1;="" droparea.classname='uploading' ;="" var="" nextfile="list.shift();" if="" (nextfile.size="">= 262144) { // 256kb
                result.innerHTML += '<div class="f">Too big file (max filesize exceeded)</div>';
                handleComplete(nextFile.size);
            } else {
                uploadFile(nextFile, status);
            }
        } else {
            dropArea.className = '';
        }
    }

    initHandlers();
})();

//It doesn’t upload files of course. But it returns some information about our files (which we will display at our receiver (client) side). 
<?php set="" error="" reporting="" level="" if="" (version_compare(phpversion(),="" '5.3.0',="" '=""?>=') == 1)
  error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);
else
  error_reporting(E_ALL & ~E_NOTICE);

function bytesToSize1024($bytes, $precision = 2) {
    $unit = array('B','KB','MB');
    return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i];
}

if (isset($_FILES['myfile'])) {
    $sFileName = $_FILES['myfile']['name'];
    $sFileType = $_FILES['myfile']['type'];
    $sFileSize = bytesToSize1024($_FILES['myfile']['size'], 1);

    echo <eof></eof><div class="s">

Your file: {$sFileName} has been successfully received.

Type: {$sFileType}

Size: {$sFileSize}

</div>
EOF;
} else {
    echo '<div class="f">An error occurred</div>';
}