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>

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>

• javascript
• html
• file-system-access-api

Share Improve this question Follow edited Jun 15, 2021 at 6:00 Kaiido 138k1414 gold badges258258 silver badges324324 bronze badges asked Jun 15, 2021 at 4:01 Conrad KlekConrad Klek 14311 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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()

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.