I’m trying to make a JS drag'n'drop upload function with directory handling.

My problem is accessing the files data itself, as a file. I want the files in an array outFiles :

var outFiles = new Array();

Lets assume that the droped files are in filelist. Then I do this :

for (var i = 0, len = filelist.length ; i < len ; i++) {
    var item = filelist[i].webkitGetAsEntry();
    if (item) {
        scanFiles(item);
    }
}

Where scanFiles treats the files from the folders differently :

function scanFiles(item) {
    // item is dir
    if (item.isDirectory) {
        let directoryReader = item.createReader();
        directoryReader.readEntries(function(entries) {
            entries.forEach(function(entry) {
                scanFiles(entry);
            });
        });
    }

    // item is file
    else if (item.isFile) {
    item.file(function(f){
            outFiles.push(f.name);
        });
    }
}

My problem is that outFiles is sometimes empty and sometimes not.

This is my actual code at that stage :

console.log(outFiles);
console.log(outFiles.length);

And this is what my browser returns :

Array []
0: "445ea31f.jpg"
1: "473cf800.webp"
2: "576fb63b.jpg"
3: "855a5d7c.png"
4: "873e4247.png"
5: "885dde4b.JPG"
length: 6
​<prototype>: Array []

0

The array is populated (with the f.name for this example, but I will need to put the whole f in it) but I can’t access it.

Why?

And if this is not the way, How do I get an array of all the items?

Thank you,