Back to Blog

Native FileSystem API is coming to our browser ๐Ÿ˜

Chidume Nnamdi

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!

โ€

โ€

โ€

โ€

More from the Blog

Native Lazy Loading ๐Ÿ’ค is coming to our browser

The prospect of lazy-loading is to minimize the load of bundles that are loaded in the initial page fetch. With lazy-loading, these tagsโ€™ contents are not loaded until they are scrolled up to the viewport of the browser. This is famously used in Medium.

Read Story

Become a JavaScript-on-Mobile Pro with PWAโ€™s

Responsive design took over the internet back in 2012, however the tech had been brewing since 2007, when Steve Jobs introduced the idea of web-apps to the world at the launch of the first iPhone.

Read Story

Understanding Typeof in JavaScript

Knowing the type of data you are working on is often found crucial. In this post, we will look into the typeof keyword in JS.

Read Story

Stay in the Loop.

Gitstart runs a monthly email newsletter for developers, engineering leaders and CEOs, covering latest tips and trends.
We will never share your email address with third parties.