I haven’t seen any examples that do this. Is this not allowed in the API spec?
I am searching for an easy drag-drop solution for uploading an entire folder tree of photos.
Advertisement
Answer
It’s now possible, thanks to Chrome >= 21.
JavaScript
x
31
31
1
function traverseFileTree(item, path) {
2
path = path || "";
3
if (item.isFile) {
4
// Get file
5
item.file(function(file) {
6
console.log("File:", path + file.name);
7
});
8
} else if (item.isDirectory) {
9
// Get folder contents
10
var dirReader = item.createReader();
11
dirReader.readEntries(function(entries) {
12
for (var i=0; i<entries.length; i++) {
13
traverseFileTree(entries[i], path + item.name + "/");
14
}
15
});
16
}
17
}
18
19
dropArea.addEventListener("drop", function(event) {
20
event.preventDefault();
21
22
var items = event.dataTransfer.items;
23
for (var i=0; i<items.length; i++) {
24
// webkitGetAsEntry is where the magic happens
25
var item = items[i].webkitGetAsEntry();
26
if (item) {
27
traverseFileTree(item);
28
}
29
}
30
}, false);
31
More info: https://protonet.info/blog/html5-experiment-drag-drop-of-folders/
As a note (from the comments) this code is not complete if more than 100 entries are returned, some iteration is required, see https://stackoverflow.com/a/53058574/885922