Folder drap and drop

Native drag and drop for folders on input type="file" using multiple webkitdirectory. From @addyosmani, based on http://code.google.com/p/chromium/issues/detail?id=58977

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="container">
    <div class="page-header">
        <h1>Demo <small>Drag and drop a directory on file input with <em>webkitdirectory</em></small></h1>
    </div>
    
    <div class="row">
      <div id="fileHolder">
          <div class="folder-icon"></div>
<!-- <input type="file" multiple webkitdirectory id="fileURL"/> -->
<input type="file" multiple id="fileURL"/>
        </div>
 
 <div class="row">
<h4>Files to upload:</h4>
 <ul id="fileOutput">
 </ul>
</div>     
     
</div>
  </div>

CSS

.container { margin:20px}
.highlightOver { background:url('http://www.prguitarman.com/comics/poptart1red1.gif'); background-position:-20px -90px;}
.type-png{ background-image:url(http://cdn5.iconfinder.com/data/icons/fatcow/16x16/file_extension_png.png)}
.type-css { background-image: url(http://cdn5.iconfinder.com/data/icons/FileTypesIcons/16/css.png);}
.type-js { background-image: url(http://cdn1.iconfinder.com/data/icons/CS5/16/ExtendScript_JSX_file_document.png);}
.row{ margin:10px}
input[type="file"] {  width: 600px; height: 300px; margin-top:-240px; background:transparent; }
#fileHolder{width: 600px; height: 200px; overflow:hidden;}
.folder-icon{ margin:30px auto; background-image:url('http://cdn5.iconfinder.com/data/icons/Eko_Folders_by_kyo_tux/128/Downloads.png'); height:128px;width:128px;}
ul { list-style-type:none}

li{
background-image: url(http://cdn1.iconfinder.com/data/icons/CrystalClear/16x16/mimetypes/unknown.png);
background-repeat: no-repeat;
padding-left: 1.6em;
}

JavaScript

/*
by Addy Osmani
based on the original webkitdirectory POC
by Ryan Seddon
*/
var files, 
    file, 
    extension, 
    input = document.getElementById("fileURL"),
    output = document.getElementById("fileOutput"),
    holder = document.getElementById("fileHolder");

input.addEventListener("change", function (e) {
    files = e.target.files;
    console.log(files);
    output.innerHTML = "";

    for (var i = 0, len = files.length; i < len; i++) {
        file = files[i];
        extension = file.name.split(".").pop();
        output.innerHTML += "<li class='type-" + extension + "'>" + file.name + " (" +  Math.floor(file.size/1024 * 100)/100 + "KB)</li>";
    }
}, false);



// This event is fired as the mouse is moved over an element when a drag is occuring
input.addEventListener("dragover", function (e) {
    holder.classList.add("highlightOver");
});

// This event is fired when the mouse leaves an element while a drag is occuring
input.addEventListener("dragleave", function (e) {
    holder.classList.remove("highlightOver");
});

// Fires when the user releases the mouse button while dragging an object.
input.addEventListener("dragend", function (e) {
    holder.classList.remove("highlightOver");
});

// The drop event is fired on the element where the drop was occured at the end of the drag operation
input.addEventListener("drop", function (e) {
    holder.classList.remove("highlightOver");
});