HTML5 Drag and Drop Multiple File Uploader

Costas · Jul 8, 2015

references
http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
http://stackoverflow.com/questions/5813344/how-to-customize-input-type-file
http://codepen.io/emiemi/pen/zxNXWR
http://www.script-tutorials.com/demos/257/index.html

source - http://www.script-tutorials.com/html5-drag-and-drop-multiple-file-uploader/
or http://www.script-tutorials.com/demos/257/index.html

JavaScript:

//test
<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Drag and Drop Multiple File Uploader | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <header tabindex="0">
            
[SIZE=6]HTML5 Drag and Drop Multiple File Uploader[/SIZE]
            [url='http://www.script-tutorials.com/html5-drag-and-drop-multiple-file-uploader/']Back to original tutorial on [B]Script Tutorials[/B][/url]
        </header>

        <div class="container">
            <div class="contr">
[SIZE=6]Drag and Drop your images to 'Drop Area' (up to 5 files at a time, size - under 256kb)[/SIZE]</div>
            <div class="upload_form_cont">
                <div id="dropArea">Drop Area</div>

                <div class="info">
                    <div>Files left: [B]0[/B]</div>
                    <div>Destination url: <input id="url" value="http://www.script-tutorials.com/demos/257/upload.php"/></div>
                    
[SIZE=6]Result:[/SIZE]
                    <div id="result"></div>
                    <canvas width="500" height="20"></canvas>
                </div>
            </div>
        </div>
        <script src="js/script.js"></script>
    </body>
</html>

JavaScript:

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

JavaScript:

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

HTML5 Drag and Drop Multiple File Uploader

Costas

Administrator