This demo contains a set of examples to use the File System Access API through this Dart library.

Below is a description of each tool you can test:

Enjoy 😄

Image Viewer to open an image file and display its content. It accepts only .png, .gif, .jpg and .webp file formats.

Text Editor to access files as text and edit them.

Click on new to reset editor and start a new document.

Click on open to open a file and edit its content. Clicking on save will save modifications in this file.

Clicking on save when no file was opened will show you a dialog to pick a file to save to.

Tree Viewer to list files/directories of a selected directory.

Click on directories to open/close their contents.

Click on an image file to open it in the Image Viewer.

Click on a text file to open it in the Text Editor.

Right-click on a directory to create a sub-folder, create a new file or delete the directory.

Right-click on a file to delete the file.

OPFS is similar to Tree Viewer but with more experimental features. It is a storage endpoint private to the origin of the page. It includes:

All features from Tree Viewer.

Right-click on a file to rename the file.

Web Worker shows the usage of Synchronous Access Handle. Web Worker only works with content from OPFS for now. This example is a dummy feature to encode / decode a file (using XOR):

Open a file.

Select file to encode to.

File will be copied to OPFS, encoded using a Web Worker and stored back to your destination.

Select file to decode to.

File will be copied to OPFS, decoded using a Web Worker and stored back to your destination.