How to recursively read local files and directories in web browser using File System Access API

Question

I need to read all the files and directories of a folder opened with the new File System Access API for the web. I am able to read a directory but don't know how to continue recursively on an elegant way

      try {
        const directoryHandle = await window.showDirectoryPicker()
        const files = []
        for await (let [name, handle] of directoryHandle) {
          const kind = handle.kind
          files.push({
            name,
            handle,
            kind,
          })
        }

Rajnikant · Accepted Answer · 2020-10-11 23:40:54Z

12

two steps, define one function that should take a directory and return all files and folders recursively as below

    async function listAllFilesAndDirs(dirHandle) {
    const files = [];
    for await (let [name, handle] of dirHandle) {
        const {kind} = handle;
        if (handle.kind === 'directory') {
            files.push({name, handle, kind});
            files.push(...await listAllFilesAndDirs(handle));
        } else {
            files.push({name, handle, kind});
        }
    }
    return files;
}

then invoke this function from your code as below

async function onClickHandler(e) {
    try {
        const directoryHandle = await window.showDirectoryPicker()
        const files = await listAllFilesAndDirs(directoryHandle);
        console.log('files', files);
    }catch(e) {
        console.log(e);
    }
}

answered Oct 11, 2020 at 23:40

Rajnikant

2,2341 gold badge25 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jinjinov Over a year ago

this code live: showdirectorypicker.glitch.me

Collectives™ on Stack Overflow

How to recursively read local files and directories in web browser using File System Access API

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related