HTML5 Drag & Drop Example

An example of HTML5 drag & drop from the local filesystem. Files are read in binary format and truncated to a fixed number of bytes. This data can then be sent to a server side script for processing.

by renfley

HTML

<div id="dropArea">DROP FILE HERE</div>
<div id="filename"></div>
<textarea id="result"></textarea>

CSS

#dropArea {
    background: #ccc;
    line-height: 400px;
    text-align: center;
    display: block;
    height: 400px;
    width: 400px;
}
#result {
    width: 400px;
    height: 400px;
}
#filename {
    background: #eaeaea;
    margin: 4px 0;
    width: 400px;
    height: 40px;
}

JavaScript

/**
 * Example of HTML5 drag and drop from the local filesystem.
 *
 * Files are read in binary format and truncated to a fixed
 * number of bytes. This data can then be sent to a server 
 * side script for processing.
 */

var MAX_BYTES = 102400; // 100 KB

function dragEnter(event) {
    console.log('dragEnter', event);
    event.stopPropagation();
    event.preventDefault();
}

function dragExit(event) {
    console.log('dragExit', event);
    event.stopPropagation();
    event.preventDefault();
}

function dragOver(event) {
    console.log('dragOver', event);
    event.stopPropagation();
    event.preventDefault();
}

function drop(event) {
    
    console.log('drop', event);
    event.stopPropagation();
    event.preventDefault();
    
    var data = event.dataTransfer;
    var files = data.files;
    var file;
    var reader;
    
    for(var i = 0; i < files.length; i++) {
        file = files[i];
        console.log(file, file.fileName);
        $('#filename').text('BINARY: ' + file.fileName);
        reader = new FileReader();
        reader.onloadend = onFileLoaded;
        reader.readAsBinaryString(file);
        //reader.readAsDataURL(file);
    }
}

function onFileLoaded(event) {
    console.log('onFileLoaded', event);
    var initialData = event.currentTarget.result.substr(0, MAX_BYTES);
    $('#result').text(initialData);
}

var dropArea = $("#dropArea").get(0);

dropArea.addEventListener("dragenter", dragEnter, false);
dropArea.addEventListener("dragexit", dragExit, false);
dropArea.addEventListener("dragover", dragOver, false);
dropArea.addEventListener("drop", drop, false);