HTML5 Drag & Drop

by Joshua McNeese

HTML

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

CSS

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

JavaScript

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.name);
        document.getElementById('filename').innerHTML = 'BINARY: ' + file.name;
        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);
    document.getElementById('result').innerHTML = initialData;
    
}

var dropArea = document.getElementById('droparea');

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