Drag and Drop Directory/Folder Upload HTML5


HOW TO HANDLE Directory uploads

You can upload directory by using webkitdirectory or mozdirectory

<input type='file'  webkitdirectory='true'   mozdirectory='true' >

Chrome 21 allows you to drop a folder or multiple folders into the browser window. To handle these, you need to change the way how you handle dropped objects.

Drag and Drop Directory/Folder Upload HTML5


<div id=”dropzone”></div>

var dropzone = document.getElementById('dropzone');
dropzone.ondrop = function(e) {
  var length = e.dataTransfer.items.length;
  for (var i = 0; i < length; i++) {
    var entry = e.dataTransfer.items[i].webkitGetAsEntry();
    if (entry.isFile) {
      ... // do whatever you want
    } else if (entry.isDirectory) {
      ... // do whatever you want
    }
  }
};
Notice that big change in drop event . chrome introduced call webkitGetAsEntry(). It will specify whether the dropped object is file or folder. and it will return Name and Fullpath also.

entry.fullPath() will give the path of the item.

For reading the entries in the directory entry you have to use directory reader.
In case of direcory follow the steps
  1.  call createReaer callback for direntry 
  2. then store the entries in array
  3. again check for entry type
  4. In case of file call the file callback
  5. it will return filename,size and mime type
Here sample algorithm code for directory entry reading
var direntry=entry.createReader();
entries=direntry.entries(); 
entries.forEach(function(entry){
//again check for again type
}); 

Further Reading:
  1. Html5 Rocks updates 
  2. Demo of Drag and drop DIrectory upload
  3. HTML5 Presentation
 

Share this

Related Posts

Previous
Next Post »

4 comments

comments
December 7, 2013 at 6:09 AM delete

Does folders upload work with FireFox?

Reply
avatar
December 9, 2013 at 12:20 PM delete

yes u can use mozdirectory. Drag and drop folder support not yet introduced in FF.

Reply
avatar
October 5, 2015 at 7:46 PM delete

Does FF support drag n drop folder now?

Reply
avatar
October 5, 2015 at 7:46 PM delete

Does FF support drag n drop folder now?

Reply
avatar