CODEWITHSUNDEEP
javascriptreactjshtml5-filesystemfilesystem-accessfile-system-access-api
Akshay K Nair
Akshay K Nair

Reputation: 1476

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

Upvotes: 8

Views: 4972

Answers (2)

Akshay K Nair
Akshay K Nair

Reputation: 1476

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

Upvotes: 4

DenverCoder9
DenverCoder9

Reputation: 2514

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.

Upvotes: 6

Related Questions