The Native File System API: Simplifying Access to Local Files

What is the Native File System API? #

The Native File System API (formerly known as the Writeable Files API) enables developers to build powerful web apps that interact with files on the user’s local device, like IDEs, photo and video editors, text editors, and more. After a user grants a web app access, this API allows web apps to read or save changes directly to files and folders on the user’s device. Beyond reading and writing files, the Native File System API provides the ability to open a directory and enumerate its contents.

If you’ve worked with reading and writing files before, much of what I’m about to share will be familliar to you. I encourage you to read anyway because not all systems are alike.

Using the Native File System API #

To show off the true power and usefulness of the Native File System APIs, I wrote a single file text editor. It lets you open a text file, edit it, save the changes back to disk, or start a new file and save the changes to disk. It’s nothing fancy, but provides enough to help you understand the concepts.

Try it #

See the Native File System API in action in the text editor demo.

Enabling via chrome://flags #

If you want to experiment with the Native File System API locally, enable the #native-file-system-api flag in chrome://flags.

Enabling support during the origin trial phase #

Starting in Chrome 83, a new origin trial has started for the Native File System API for all desktop platforms.

If you had an origin trial token for the first origin trial (that ran from Chrome 78 to Chrome 82), you will need to obtain a new origin trial token.

Origin trials allow you to try new features and give feedback on their usability, practicality, and effectiveness to the web standards community. For more information, see the Origin Trials Guide for Web Developers. To sign up for this or another origin trial, visit the registration page.

Request a token for your origin.
Add the token to your pages. There are two ways to do that:

Add an origin-trial <meta> tag to the head of each page. For example, this may look something like:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">
If you can configure your server, you can also add the token using an Origin-Trial HTTP header. The resulting response header should look something like:
Origin-Trial: TOKEN_GOES_HERE

#file system api #api #local files