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.

<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

 

Author : Raju Konga

Share this

Related Posts