Recursively list files in react-filepond?

Question

Using react-filepond is there a way to list all of the files in a selected directory? Or does that need to be handled by the backend when the upload occurs? I'm trying to list all of the files so that I can flatten the directory and assign each file a unique id instead. I don't need/want access to the system files.

How far I've gotten: I have a working react-filepond tag that allows directory and file uploads, but I can't seem to figure out how to list all of the nested files.

Current Work:

<div style={{overflowY: "scroll", maxHeight: 200}}>
    <FilePond 
        onupdatefiles={(e) => handleFilesUpdate(e)}
        onaddfileprogress={(e) => handleProgress(e)}
        files={targetFileList}
        ref={ref => this.pond = ref}
        allowMultiple={true}
        allowDirectories={true}
        dropOnPage={true}
        dropOnElement={true}
    />
</div>

Edit #1:

Not using react-filepond I can iterate through a droppped directory with the following code:

// Drop handler function to get all files
    async getAllFileEntries(dataTransferItemList) {
        this.setState({parsingDragNDrop: true}, async () => {
            this.numDirs = 0
            let fileEntries = [];
            // Use BFS to traverse entire directory/file structure
            let queue = [];
            // Unfortunately dataTransferItemList is not iterable i.e. no forEach
            for (let i = 0; i < dataTransferItemList.length; i++) {
                // Note webkitGetAsEntry a non-standard feature and may change
                // Usage is necessary for handling directories
                queue.push(dataTransferItemList[i].webkitGetAsEntry());
            }
            while (queue.length > 0) {
                let entry = queue.shift();
                if (entry.isFile) {
                    fileEntries.push(entry);
                } else if (entry.isDirectory) {
                    queue.push(...await this.readAllDirectoryEntries(entry.createReader()));
                    this.numDirs += 1
                }
            }
            this.setState({targetFileList: fileEntries, parsingDragNDrop: false, readyToUpload: true}, () => {
                console.log('fileEntries.length', fileEntries.length, fileEntries)
            })
        })
    }

    // Get all the entries (files or sub-directories) in a directory
    // by calling readEntries until it returns empty array
    async readAllDirectoryEntries(directoryReader) {
        let entries = [];
        let readEntries = await this.readEntriesPromise(directoryReader);
        while (readEntries.length > 0) {
            entries.push(...readEntries);
            readEntries = await this.readEntriesPromise(directoryReader);
        }
        return entries;
    }

    // Wrap readEntries in a promise to make working with readEntries easier
    // readEntries will return only some of the entries in a directory
    // e.g. Chrome returns at most 100 entries at a time
    async readEntriesPromise(directoryReader) {
        try {
            return await new Promise((resolve, reject) => {
                directoryReader.readEntries(resolve, reject);
            });
        } catch (err) {
            console.log(err);
        }
    }

credit: https://stackoverflow.com/a/53058574/13480381

Not sure how to do this with a regular html input tag where you click it though. From what I understand I can't allow a user to click to browse to upoad files and directories from the same input tag and when I do allow directories, I can't seem to iterate over the uploaded directory except on the backend. Is this true?

Recursively list files in react-filepond?

0 Answers0