Drag&Drop directory

by azproduction

HTML

<div id="holder"></div> 
  <p class="success" id="status">File API &amp; FileReader available</p>
  <p>Drag an image from your desktop on to the drop zone above to see 
the browser read the contents of the file and use it as the background -
 without uploading the file to any servers.</p>

CSS

#holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px auto;}
#holder.hover { border: 10px dashed #333; }

JavaScript

var holder = document.getElementById('holder'),
    state = document.getElementById('status');

if (typeof window.FileReader === 'undefined') {
  state.className = 'fail';
} else {
  state.className = 'success';
  state.innerHTML = 'File API & FileReader available';
}

function isReadableFile(file, callback) {
    var reader = new FileReader();
    reader.onload = function (event) {
        callback && callback(true);
        callback = null;
    }
            
    reader.onerror = function () {
        callback && callback(false);
        callback = null; 
    }
        
    try {
        reader.readAsDataURL(file); 
    } catch (e) {
        callback && callback(false);
        callback = null; 
    }
}

holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondragend = function () { this.className = ''; return false; };
holder.ondrop = function (e) {
    this.className = '';
    e.preventDefault();
  
    var file = e.dataTransfer.files[0],
        reader = new FileReader();
    
    isReadableFile(file, function (result) {
        if (result) {
            reader.onload = function (event) {
                holder.style.background = 'url(' + event.target.result + ') no-repeat center';
            };
            reader.readAsDataURL(file);
            state.innerHTML = 'OK! ' + [file.name, file.name, file.type].join(', ');
        } else {
            state.innerHTML = 'WTF! ' + [file.name, file.name, file.type].join(', ') ;
        }
    })

    return false;
};