Local File Editor

File System Access API simplifies the way you can read and write local data. This site is my personal learning and testing ground for the File System Access API. It is based on the documentation found at https://developer.chrome.com/docs/capabilities/web-apis/file-system-access? .

Check availability

Click on the Button to check if your browser supports the File System Access API. When your browser supports the File System Access API, you can create a connection to Read and to Write Files which is demonstrated in the following sections. Note that I intentionally do not use the try-catch construct in the code snippets, to solely focus on the functionality. In your own code, you should use the try-catch construct for asynchronous functions.

Open, Read, Create and Save File

To read a file, use let [filePointer] = await window.showOpenFilePicker(); (the funtion returns an array, so we just take the first one). You can read the file contents and display it in a textarea.

To write to a file, we first need to create the file. For this, we use let filePointer = await window.showSaveFilePicker();. We store the reference to the file to the global variable filePointer so we can use it later. In our next function SaveToFile, we create a writeable stream to the file and write to it.

Status: No file selected yet.

Javascript