Home

New Chrome File System Access API

Chrome 86 introduced File System Access API which will be really useful since it allows writing to the files directly from Web.

cover image

Problem

If you ever used HTML <input/> element, you probably used file input that looks like this

<input type="file"/>

This allows you to choose a file from disk and upload it where you want. You could also add a download attribute to an anchor that will show you a file picker and then save the file.

The problem with this is that you can't write to that same file directly in any way, which can be really annoying.

This is where the new File API comes into play

Solution

With the File System Access API (which is now available in stable release) you can call showOpenFilePicker() which shows a file picker, then returns a file handle that you can use to read the file.

showOpenFilePicker()

async function getFileHandle() { const options = { types: [ { description: "HTML File", accept: { "text/html": [".html", ".htm"] } } ] }; return await window.showOpenFilePicker(options); }

As you can see this is pretty simple. We create an options variable that has a configuration in it. After creating config we then call showOpenFilePicker(options) and pass config as a parameter.

showSaveFilePicker()

To save a file to disk, you can either use that filehandle that you got earlier or call showSaveFilePicker() to get a new file handle.

async function saveFile(fileHandler) { if (!fileHandler) { fileHandler = await window.showSaveFilePicker(); } const file = await fileHandler.createWritable(); await file.write(some_file_content); await file.close(); }

With this, you will be able to open the file, write desired content to it, and then save it.

showDirectoryPicker()

You can also use showDirectoryPicker() to open a directory, allowing you to get a list of files, or create new files in that directory, which can be used for something like a media player or anything that interacts with a lot of files.

Permissions

Before using any of these functionalities you will need to get permission from a user, otherwise it won't work.

Thanks to the Google team for this great feature. I already have some cool ideas for this. Do you? :)