Access all files within a given folder (The File System Access API)

Question

Can I use the File System Access API (https://web.dev/file-system-access/) to create something like a file explorer within a website (react).

I plan to make a simple online file explorer that lets you browse open a folder and then lets you browse through the folder, play videos and MP3s.

(I know this wasn't possible a few years ago, because it was impossible for js to access anything in the local storage, I just wanted to know if anything have changed or not. If File System Access API is not the way to go, can you suggest some better way to read bulk local files from a folder.)

Yes the file system API is the way to go, and yes you can do it, in Chrome, from a securecontext. — Kaiido, Feb 04 '21 at 09:08
There's a web component using this api - https://github.com/DannyMoerkerke/file-tree which is used at https://whatpwacando.today/file-system — Udayraj Deshmukh, Nov 13 '21 at 18:51

score 3 · Answer 1 · answered Feb 23 '21 at 15:08

3

This is possible with the File System Access API today:

const dirHandle = await window.showDirectoryPicker();
for await (const entry of dirHandle.values()) {
  console.log(entry.kind, entry.name);
}

You can explore the folder structure by going deeper if entry.kind is a directory.

answered Feb 23 '21 at 15:08

DenverCoder9

2,024
11
32

Thank you. And ```[fileHandle] = await window.showOpenFilePicker();``` – Akshay K Nair Feb 24 '21 at 05:58
hi how do I get the list without using the await keyword? – B''H Bi'ezras -- Boruch Hashem May 11 '22 at 05:27
It’s an asynchronous API designed to be non-blocking. You have to `await` its result, there’s no way around this. You can of course use `showOpenFilePicker.then((handles) => {/*…*/})` as ana alternative code style if you prefer. – DenverCoder9 May 11 '22 at 05:51

Akshay K Nair · Accepted Answer · 2021-02-24T06:05:38.893

For future reference, I'm posting my work; https://github.com/akshayknz/filesystem-access-api/blob/main/file.html (A html page which displays all images from picked folder.)

Note:The API only work in secure contexts (i.e. it works in https:// and file:///)

[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();

or

const dirHandle = await window.showDirectoryPicker();
const fileHandle = await dirHandle.getFileHandle(entry.name, {});
const file = await fileHandle.getFile();

Access all files within a given folder (The File System Access API)

2 Answers2