javascriptdrag-and-drophtml5-filesystem

Javascript file dropping and reading directories - Asynchronous Recursion


So I'm trying to create a file dropper web application. Right now, a user can drop files on the screen and I can read them, including all the files in a directory that was dropped. But, I don't know when the script is done reading the files.

Some code:

This first function handles a 'drop' event and will loop through each file and send it to another function that will read its contents.

function readDrop( evt )
{
    for( var i = 0; i < evt.dataTransfer.files.length; i++)
    {
        var entry = evt.dataTransfer.items[i].webkitGetAsEntry();

        if(entry)
            readContents(entry, "");
    }

    //Do stuff after all files and directories have been read.
}

This function is a recursive FileEntry reader. If it is a file, I will read the FileEntry. If it is a directory, it will loop through the contents and pass it through this function.

function readContents(entry, path)
{
    if( entry.isFile )
    {
        readFileData( entry, path, function(fileData)
        {
            _MyFiles.push( fileData );
        });
    }
    else if( entry.isDirectory )
    {
        var directoryReader = entry.createReader();
        var path = path + entry.name;

        directoryReader.readEntries(function(results)
        {
            for( var j = 0; j < results.length; j++ )
            {
                readContents(entry, path);
            }

        }, errorHandler)
    }
}

And here is my function for reading the files. The callback just pushes the fileData object to a global array

function readFileData(entry, path, callback)
{
    var fileData = {"name": entry.name, "size": 0, "path": path, "file": entry};

    entry.file(function(file)
    {
        fileData["size"] = file.size;
        callback( fileData );
    }
}

I'm not sure where to go from here so that I can have a callback when all files and directories have been read.


Solution

  • The FileSystem API doesn't seem well suited for the task of a full recursive traversal, perhaps that's part of the reason why other vendors are not adopting it. Anyway, with an arcane combination of Promises I think I was able to accomplish this goal:

        function traverse_directory(entry) {
            let reader = entry.createReader();
            // Resolved when the entire directory is traversed
            return new Promise((resolve_directory) => {
                var iteration_attempts = [];
                (function read_entries() {
                    // According to the FileSystem API spec, readEntries() must be called until
                    // it calls the callback with an empty array.  Seriously??
                    reader.readEntries((entries) => {
                        if (!entries.length) {
                            // Done iterating this particular directory
                            resolve_directory(Promise.all(iteration_attempts));
                        } else {
                            // Add a list of promises for each directory entry.  If the entry is itself 
                            // a directory, then that promise won't resolve until it is fully traversed.
                            iteration_attempts.push(Promise.all(entries.map((entry) => {
                                if (entry.isFile) {
                                    // DO SOMETHING WITH FILES
                                    return entry;
                                } else {
                                    // DO SOMETHING WITH DIRECTORIES
                                    return traverse_directory(entry);
                                }
                            })));
                            // Try calling readEntries() again for the same dir, according to spec
                            read_entries();
                        }
                    }, errorHandler );
                })();
            });
        }
    
        traverse_directory(my_directory_entry).then(()=> {
            // AT THIS POINT THE DIRECTORY SHOULD BE FULLY TRAVERSED.
        });