Access the Filesystem with Javascript
A Quick overview of the File System Access API
Filesystem access has been a pipe dream for JS developers. Until this year, until the introduction of the File System Access API. This API enables JS developers to read and write to the host’s filesystem. In this post, I’ll walk you through reading and writing data to the filesystem.
Access a directory and file
You can access a directory by invoking function window.showDirectoryPicker . This will open a window to select a directory. Once selected, the function will return a Promise . This Promise will return your directory handle. The directory handle is your gateway to the filesystem. Here is a sample function demonstrating this code :
let dirHandle;async function readConfig(){
dirHandle = await window.showDirectoryPicker();}
To access a file, I’ll invoke directory handle method getFileHandle . This will return a file handle. While invoking the function, I’ll set option create to true. By doing this, the API will create the file if it’s not present. To access the actual data, I’ll invoke method getFile from my returned file handle. This will return an object of type File . If the file I’m opening is text based, I can invoke method text to retrieve a string representation of the file data. If the file is empty or non-existent, an empty string will be returned. Here is the code to perform this operation :
const file = await dirHandle.getFileHandle("config.json", {
create: true
})fileData = await file.getFile();let text = await fileData.text()alert(text)
The code above will load a file named config.json from the directory selected earlier. Now, what about writing data to the file system?
Writing data
To write data, I’ll begin by invoking getFileHandle method on my directory handle. I’ll proceed by creating a Writable Stream of my file by invoking file handle method createWritable . Data written to the stream will be stored to the underlying file. Here is a code block to write a JSON string to a file :
const file = await dirHandle.getFileHandle("config.json", {
create: true
})const sampleConfig = JSON.stringify({
prop1 : true,
prop2 : "Very cool key"
})const blob = new Blob([sampleConfig])const writableStream = await file.createWritable();// write our file
await writableStream.write(blob);// close the file and write the contents to disk.
await writableStream.close();
Conclusion
While writing this post, I discovered some limitations of the API. Access to a filesystem requires a user to initiate the process. This means that end users must invoke the function accessing the filesystem with a click. Failing to do so will result in an exception being thrown. The API will not work on a website without SSL. This was put in place for obvious reasons. However, it will work for websites accessed via localhost. You can read more about the File System Access API by clicking on the link below.
