Managing local files from a PWA

Demo

Install the app, then click on the zone below to open the device's file system and select an image or text file.

Features & Use Cases

The File System API provides web developers with a way to interact with files and directories on a user's local file system directly from a PWA. This demo is a basic example of the type of features you can implement with this API. Here are some more examples:

• File editing: Once files have been selected, you can enable users to edit them in your PWA and save them back to their device.
• Drag-and-drop: The File System API also supports drag-and-drop (to keep things simple, the demo on this page does not), meaning you can build an intuitive way for your users to upload one or multiple files to your PWA.
• File viewer: This is what this demo does. You can find the code for this below.
• Metadata: Since the API also lets you access the metadata of files shared with your PWA, you can build functionality that analyses or categorizes these files.

Code

Links & Documentation

• File System API Documentation on MDN
• File System on Chrome Developers