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.
โ
The fileHandle is a FileSystemFileHandle instance. This contains methods and properties with which we can access the file contents and properties.
โ
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().
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().
โ
With the writer we can call the write method:
โ
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:
โ
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:
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():
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:
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:
โ
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!
โ
โ
โ
โ