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
- call createReaer callback for direntry
- then store the entries in array
- again check for entry type
- In case of file call the file callback
- it will return filename,size and mime type
var direntry=entry.createReader();
entries=direntry.entries();
entries.forEach(function(entry){
//again check for again type
});
Further Reading:
4 comments
commentsDoes folders upload work with FireFox?
Replyyes u can use mozdirectory. Drag and drop folder support not yet introduced in FF.
ReplyDoes FF support drag n drop folder now?
ReplyDoes FF support drag n drop folder now?
Reply