Доступ к содержимому файла подкаталога с помощью showDirectoryPicker()

Question

Как мне получить доступ к файлам, содержащимся в папке выбранного каталога, с помощью к API доступафайловой системе ?

Answer 1

Небольшое улучшение ответа Кайидо:

      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() возвращает список объектов, которые наследуются от FileSystemHandle, есть две возможности: либо FileSystemFileHandle или .

С const entry уже есть FileSystemDirectoryHandle в случае, когда entry.kind является "directory" нет необходимости звонить dirHandle.getDirectoryHandle()

Answer 2

Вам нужно позвонить в dirHandle.getDirectoryHandle(name, options) метод, с name параметр установлен для вашей записи .name.

Вот пример кода, который будет проходить через переданный каталог и строить дерево найденных файлов.

      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 );
    }
  }
}

Живая демонстрация , отредактируйте код .