Gone are the days of user’s uploading a file, making their changes and downloading a new version of that same file. Web apps that interact with files on the user's local device can offer a more seamless experience by leveraging APIs that work directly with the user’s operating system.
The web can
Interact seamlessly with users’ local files
TL;DR
With the help of a couple powerful APIs, building web apps that interact with files on the user's local device is more efficient than ever before.
The opportunity
More intuitive file interactions
File System Access API
Using the File System Access API, when a user grants a web app access, it allows them to read or write changes directly to files and folders on the user's device.
Game editor Construct 3 provides the option of saving to local files with the File System Access API
File Handling API
The File Handling API makes it possible to let developers register web apps as file handlers for the file types that their apps can create and process. This means users can click such files in their operating system's file explorer and the web app would then open and handle the file in question.
Using the File Handling API, Excalidraw is the default file handler for .excalidraw files
Use Cases
Enabling users to save projects in Construct 3 to the file system
Construct 3 is a game editor developed by the brothers Thomas and Ashley Gullen. For the present third iteration of their game editor, the two went all-in on the web. The Construct team have found working with files on the user's file system to be very intuitive for customers. It works similarly to traditional desktop apps, and integrates conveniently with other software. For example, backup software can make backups of user's files, or for easily sending work to other places, or editing files with external tools. They also use the File System Access API for various other use cases, such as selecting a backup folder or importing assets like animations.
In Construct3
65%
of saves are completed by using the File System Access API.
Getting started
File System Access API
The File System Access API is currently supported on most Chromium browsers on Windows, macOS, ChromeOS, and Linux. For browsers that don’t support these APIs, you can apply these fallback methods.
File Handling API
The File Handling API is also currently supported on most Chromium browsers and for those where support is limited, you can use progressive enhancement techniques to achieve your goals.
Was this content helpful?
More resources
How Photopea uses the File Handling API to let users open files from their file explorer
The File Handling API allows web applications to register themselves as a file handler for file formats the application can support. Learn how the image editing application Photopea makes use of this API.
Advanced web APIs in real world apps
Explore how a number of partners use advanced web APIs like file system access, file handling, eyedropper, local font access, and more in their real world apps. The focus is not so much on the technical implementation, but on the unlocking of use cases that these APIs enable.