Updated: 03 September 2023

The FileSystemApi is a browser API that allows us to read and write to files and folders using JavaScript

A simple example of listing the files in a folder can be seen below:

1
let dir
2
let entries = []
3

4
document.getElementById('open').addEventListener('click', async () => {
5
  dir = await window.showDirectoryPicker()
6

7
  for await (const entry of dir.values()) {
8
    entries.push(entry)
9
  }
10
})

Once you’ve got the directory entries in the entries array, you can do a bunch of other stuff, like read the file contents

Values from the dir.values() method will have either a kind of file or directory. Each of which will evaluate to a FileSystemFileHandle or a FileSystemDirectoryHandle respectively

We can read the contents of a file in the directory like so:

1
const fileHandle = entries[5]
2

3
const file = await fileHandle.getFile()
4

5
const text = await file.text()