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.
If you ever used HTML
<input/> element, you probably used file input that looks like this
This allows you to choose a file from disk and upload it where you want. You could also add a
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
With the File System Access API (which is now available in stable release) you can call
which shows a file picker, then returns a file handle that you can use to read the file.
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.
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.
With this, you will be able to open the file, write desired content to it, and then save it.
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.
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? :)