Accessing sub-directory file content using showDirectoryPicker()

Question

Using the File System Access API, how would I access the files contained within a folder of the chosen directory?

document.querySelector('button').addEventListener('click', async () => {
  const dirHandle = await window.showDirectoryPicker();
  for await (const entry of dirHandle.values()) {
    if (entry.kind === "file"){
      const file = await entry.getFile();
      const text = await file.text();
      console.log(text);
    }
    if (entry.kind === "directory"){
      /* for file in this directory do something */ 
    }
  }
});

<button>Choose Directory</button>

score 7 · Answer 1 · answered Oct 20 '21 at 07:05

A small improvement to Kaiido's answer:

btn.onclick = async (evt) => {
  const out = {};
  const dirHandle = await showDirectoryPicker();  
  await handleDirectoryEntry( dirHandle, out );
  console.log( out );
};
async function handleDirectoryEntry( dirHandle, out ) {
  for await (const entry of dirHandle.values()) {
    if (entry.kind === "file"){
      const file = await entry.getFile();
      out[ file.name ] = file;
    }
    if (entry.kind === "directory") {
      const newOut = out[ entry.name ] = {};
      await handleDirectoryEntry( entry, newOut );
    }
  }
}

dirHandle.values() returns a list of objects that inherit from FileSystemHandle, there are two possibilities: either FileSystemFileHandle or FileSystemDirectoryHandle.

Since const entry already is a FileSystemDirectoryHandle in case when entry.kind is "directory" there is no need to call dirHandle.getDirectoryHandle()

score 5 · Accepted Answer · answered Jun 15 '21 at 05:59

You need to call the dirHandle.getDirectoryHandle(name, options) method, with the name parameter set to your entry's .name.

Here is an example code that will walk through a passed directory and build a tree of the files it found.

btn.onclick = async (evt) => {
  const out = {};
  const dirHandle = await showDirectoryPicker();  
  await handleDirectoryEntry( dirHandle, out );
  console.log( out );
};
async function handleDirectoryEntry( dirHandle, out ) {
  for await (const entry of dirHandle.values()) {
    if (entry.kind === "file"){
      const file = await entry.getFile();
      out[ file.name ] = file;
    }
    if (entry.kind === "directory") {
      const newHandle = await dirHandle.getDirectoryHandle( entry.name, { create: false } );
      const newOut = out[ entry.name ] = {};
      await handleDirectoryEntry( newHandle, newOut );
    }
  }
}

Live demo, edit code.

Accessing sub-directory file content using showDirectoryPicker()

2 Answers2