Native FileSystem API is coming to our browser 😍

Accessing the filesystem is a common feature of apps, but coming to the browser it’s an all-out battle with the filesystem. The only far we can go is by using the input#type=file, which also is very tricky and complex. We have no way in the browser to enumerate filesystems, read files, and write files from our web apps.

But Chrome is changing all that with the coming of the Native Filesystem API. 

‍

The API

It starts with the chooseFileSystemEntries(), this is available in the window object:

window.chooseFileSystemEntries()

This would open a system-level file picker dialog. If a file or directory is selected, a file handle on the files is returned. This file handle will be used to perform actions on the selected file.

Note: window.chooseFileSystemEntries() returns a Promise.

‍

Reading files

With the file handle returned by window.chooseFileSystemEntries(), we can read a file and use the contents.

const fileHandle = window.chooseFileSystemEntries()

‍

The fileHandle is a FileSystemFileHandle instance. This contains methods and properties with which we can access the file contents and properties.

const fileHandle = window.chooseFileSystemEntries()
const file = fileHandle.getFile()

‍

The fileHandle.getFile() returns a File handle to the file, this contains the contents of the file in a blob.

To get the contents from the file handle, we can use the Blob methods: slice() , stream() , text() , arrayBuffer().

const fileHandle = await window.chooseFileSystemEntries()
const file = await fileHandle.getFile()    // get the string contents.
const fileContent = await file.text()

With the data of the file in the fileContent, we can then use it.

‍

Writing files

To write to files, we will use the createWriter method. The createWriter is a method in the FielSystemFileHandle returned by window.chooseFileSystemEntries().

const fileHandle = await window.chooseFileSystemEntries()
const writer = await fileHandle.createWriter()

‍

With the writer we can call the write method:

const fileHandle = await window.chooseFileSystemEntries()
const writer = await fileHandle.createWriter()
await writer.write(0, textarea.value)

‍

The write method initializes the writing process to the fileHandle. See, we passed 0 to the write method, this causes the entire contents in the textarea to the file.

Next, we close the file:

const fileHandle = await window.chooseFileSystemEntries()
const writer = await fileHandle.createWriter()
await writer.write(0, textarea.value)await writer.close()

‍

This is a must-do, so to avoid memory leaks and to avoid loose memory pointers hanging around.

We can create a new file using this Native filesystem.

This is done by passing an options object to the API:

const opts = { type: 'saveFile'};

When we pass chooseFileSystemEntries(opts), it will open a system-level save file dialog. In the dialog we can type in the name of the file and press save button, a new file will be created in the directory the save file dialog was pointing to, with a name we typed. The save file dialog opened because of the type property in the opts set to saveFile, it tells the OS that we want to create a new file, so it pops up a save file dialog.

‍

We can pass different options to chooseFileSystemEntries():

const opts = {
	type: 'saveFile',
  accepts: [
  {
    description: 'rudeboy - audio money',
      extensions: ['mp3'],
      mimeTypes: ['audio/mpeg'],
    }
  ]
};

Here, we are telling the system that we want to create a new file with the name “rudeboy — audio money”, and the file extension is .mp3.

‍

Selecting a directory

We can select a directory to get its contents by passing in the options:

const opts = { type: "openDirectory"}

to chooseFileSystemEntries().

This will return a FileSystemDirectoryHandle handle to the directory selected.

FileSystemDirectoryHandle has properties for manipulating directories. One of its methods is the getEntries method. This returns a list of all the contents in a directory:

const opts - {type: "openDirectory"}
const fileSystemDirectoryHandle = await chooseFileSystemEntries(opts)
const entries = await fileSystemDirectoryHandle.getEntries()

‍

The list is contained in the entries. The contents can be a file or a directory. Each entry in the list has properties that return information on each entry.

‍

Use Cases

This API opens so many doors for us.

The most perfect example will be a text editor in our web app. Thes API and its sub-methods will enable us to create a text editor that can read files, write files and enumerate directory contents.

That’s super cool! :)

‍

Availability

Native FileSytem API is available as an origin trial in Chrome 78.

‍

Check out 👇 for more info:

The Native File System API: Simplifying access to local files

‍

Conclusion

‍

Web apps are booming with the sudden rise of PWAs, Nodejs. Browsers are really evolving.

With this, most devs are stuck with the browser and the majority of users stay on the internet, so there is a sudden need for the Native APIs and features to be moved to the browser.

Do you think these APIs coming to the browsers will pose a challenge for any need for native apps? :)

Drops your thoughts, suggestions in the comments. Let’s discuss!

‍

‍

‍

‍