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

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

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

Solution

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

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