Folder drap and drop

Native drag and drop for folders on input type="file" using multiple webkitdirectory

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">
<input type="file" multiple webkitdirectory id="fileURL"/>
 <ul id="fileOutput"></ul>
</div>

  </div>

CSS

.container { margin:20px}
.type-css { color:red}
.type-js { color:blue}
.row { margin:5px}

JavaScript

(function(){
            var files, 
                file, 
                extension,
                input = document.getElementById("fileURL"), 
                output = document.getElementById("fileOutput");
            
            input.addEventListener("change", function(e) {
                files = e.target.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 + "</li>";
                }
            }, false);
})();