Get a list of all files within a directory in a client machine using browser

Question

The use case here is not that important though but the use actually is. I want to browse the users local file system via browser like we do via <input type="file"> but instead of picking up a file I want to pick up a directory and get list of all the files and directories inside it.

Once I get that list of files I want to recursively show them in a treeview like structure.

This is a example of what I know can be done via File System Access Api.

I just want to use this API to create something like a File Manager or a treeview.

Thanks.

Bye bye privacy, if you want to open the entire disk drive like a file manager. — Joop Eggen
– Joop Eggen, Commented Jun 20, 2022 at 13:41
@JoopEggen It's not a attack on privacy. As the user will be picking the directory they want to give access by themselves. — Atul Bhatt
– Atul Bhatt, Commented Jun 28, 2022 at 5:58

DenverCoder9 · Accepted Answer · 2022-06-20 13:20:14Z

4

To enumerate all files in a directory, call showDirectoryPicker(). The user selects a directory in a picker, after which a FileSystemDirectoryHandle is returned, which lets you enumerate and access the directory's files.

const button = document.getElementById('button');
button.addEventListener('click', async () => {
  const dirHandle = await window.showDirectoryPicker();
  for await (const entry of dirHandle.values()) {
    console.log(entry.kind, entry.name);
  }
});

If you additionally need to access each file via getFile() to, for example, obtain the individual file sizes, do not use await on each result sequentially, but rather process all files in parallel, for example, via Promise.all().

const button = document.getElementById('button');
button.addEventListener('click', async () => {
  const dirHandle = await window.showDirectoryPicker();
  const promises = [];
  for await (const entry of dirHandle.values()) {
    if (entry.kind !== 'file') {
      break;
    }
    promises.push(entry.getFile().then((file) => `${file.name} (${file.size})`));
  }
  console.log(await Promise.all(promises));
});

answered Jun 20, 2022 at 13:20

DenverCoder9

2,74517 silver badges40 bronze badges

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

4 Comments

yeya Over a year ago

Thanks, but why "not use await on each result sequentially"?

DenverCoder9 Over a year ago

Processing sequentially would be slower. Processing everything in parallel is the faster alternative.

yeya Over a year ago

does your for await isn't sequentially wait for each of dirHandle.values?

DenverCoder9 Over a year ago

The FileSystemDirectoryHandle.values() method returns an asynchronous iterator, see the documentation. Getting a file via getFile() is the asynchronous operation that is being parallelized.

Collectives™ on Stack Overflow

Get a list of all files within a directory in a client machine using browser

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related