File System Access API Demo - Online Open & Save Files

The File System Access API is a modern browser API that allows web applications to read, write, and manage files and directories directly on the user's local file system. Unlike traditional <input type="file">, it provides persistent access to files and folders with explicit user permission, enabling powerful workflows like in-place file editing, project folder management, and seamless saving without repeated downloads.

Currently, the API is fully supported in Google Chrome (version 86+), Microsoft Edge (version 86+), and other Chromium-based browsers. It is available on desktop platforms (Windows, macOS, Linux, ChromeOS). Firefox and Safari have not yet implemented the API. The API requires a secure context (HTTPS or localhost). Mobile browser support is limited.

Yes — security is a core design principle. The API never grants automatic access to the file system. Every file or directory access requires an explicit user gesture (like clicking a file picker or dragging a file). The browser shows clear permission prompts, and permissions can be revoked at any time. File handles stored in IndexedDB are origin-bound and cannot be transferred across domains. The API also respects the same-origin policy and requires HTTPS.

File handles stored in IndexedDB retain their permissions across page reloads for read access in most cases. However, write permissions typically require re-prompting. You can check permission status using handle.queryPermission({ mode: 'readwrite' }) and request again with handle.requestPermission(). Permissions may expire after some time or if the user clears browser data. Always handle NotAllowedError gracefully.

No. The API is user-driven — the application can only access files and directories that the user explicitly selects through a file picker dialog or drag-and-drop action. There is no way to enumerate the user's file system or access arbitrary paths. This is fundamentally different from native applications and is designed to protect user privacy.

Traditional file inputs provide one-time read-only access and require re-uploading to save changes. The File System Access API provides persistent handles that allow reading and writing directly to the original file location without re-downloading. It also enables directory access, file creation, and more complex file management workflows — all while maintaining security through user-granted permissions.

Common use cases include: text/code editors that edit local files, image editors that save directly to disk, IDE-like tools working with project folders, data analysis tools reading large local datasets, document management apps, backup utilities, and any application that benefits from direct file system integration without constant upload/download cycles.

Yes! Once the page is loaded and the user has granted file access, all file operations happen locally on the device. No network connection is required for reading or writing files. This makes it ideal for Progressive Web Apps (PWAs) and offline-first applications. Combined with a service worker, the entire tool can function without internet access.

The API itself does not impose strict file size limits, but practical limits depend on available system memory and browser implementation. For very large files (hundreds of MB or GB), reading the entire file into memory at once may cause performance issues. For such cases, consider using streaming reads via the File object's .stream() method or processing files in chunks.

A FileSystemHandle is an object representing a file or directory on the user's local system. There are two types: FileSystemFileHandle (for files) and FileSystemDirectoryHandle (for directories). These handles are structured cloneable, meaning they can be stored in IndexedDB for later use. When retrieved, you can call methods like .getFile() or .createWritable() to interact with the file system entry.