File System Access API: Browser Support, Methods, Limits

What is the File System Access API?

The File System Access API is a JavaScript API from the Web Platform Incubator Community Group at the W3C. It lets a web page open file and directory pickers, read existing files, and write new files directly to the user's local disk. The entry points are window.showOpenFilePicker, window.showSaveFilePicker, and window.showDirectoryPicker, with a separate sandboxed entry on navigator.storage.getDirectory.

Which browsers does the File System Access API support?

Chromium-based desktop browsers ship the local-disk picker methods, while Firefox, Safari, and mobile browsers skip them, so global picker usage sits around 27%. The Origin Private File System half ships much wider.

What are the key methods of the File System Access API?

The File System Access API exposes three top-level Window methods for local-disk access, plus a separate entry point on navigator.storage for the Origin Private File System. Each picker returns a handle the page can read, write, or store for later.

• window.showOpenFilePicker: Opens the system file dialog and returns an array of FileSystemFileHandle objects. The page reads the picked file with handle.getFile().
• window.showSaveFilePicker: Prompts the user to pick a save location and filename, then returns a FileSystemFileHandle the page can write through createWritable().
• window.showDirectoryPicker: Asks the user to pick a folder and returns a FileSystemDirectoryHandle that supports async iteration over its contents.
• FileSystemWritableFileStream: The writable stream returned by createWritable. It supports write, seek, and truncate, and the file only lands on disk when the page calls close.
• queryPermission and requestPermission: Per-handle permission gates. The page upgrades from read to readwrite without re-opening the picker.
• navigator.storage.getDirectory: Entry point to the Origin Private File System. Returns a sandboxed FileSystemDirectoryHandle scoped to the page's origin, persistable across reloads in IndexedDB.

What is the Origin Private File System (OPFS)?

The Origin Private File System is a sandboxed storage tree that lives inside the browser, not on the user's visible disk. Every origin gets its own private root, which the page reads through navigator.storage.getDirectory.

OPFS is the part of the spec that ships in every modern engine. Chrome 86+, Edge 86+, Firefox 111+, and Safari 15.2+ all support it on desktop and mobile, including iOS where the local-disk pickers stay locked. Inside a Web Worker, OPFS exposes FileSystemSyncAccessHandle for synchronous random-access reads and writes, which lets compiled libraries like SQLite-on-the-web treat OPFS as a file descriptor.

• Per-origin sandbox: Files in OPFS are invisible to other origins, other browsers, and the user's file manager. The browser can wipe them under storage pressure.
• No user prompt: The first call to navigator.storage.getDirectory returns a handle without a picker dialog.
• Sync access in workers: FileSystemSyncAccessHandle.read and write are blocking calls inside a Worker, which lets compiled libraries treat OPFS like a local file descriptor.

How do you check if a browser supports the File System Access API?

Feature-detect each picker method on the window object before you call it, and feature-detect navigator.storage.getDirectory separately for the Origin Private File System. Wrap the picker call in an if-block and ship a fallback for browsers that return undefined.

• Open DevTools: Press F12 in Chrome, Edge, Opera, Firefox, or Safari, then switch to the Console tab.
• Paste the snippet: Drop the JavaScript block below into the console and press Enter.
• Read the output: A Chromium browser prints all three picker names. Firefox and Safari print the not-supported branch. Every modern engine prints OPFS available.
• Wire a fallback: If pickers are missing, fall back to <input type="file"> for reads and the <a download> attribute or the GoogleChromeLabs/browser-fs-access library for writes.
• Re-test on HTTPS: The pickers are SecureContext only. If the page is on plain HTTP, move it to HTTPS or http://localhost and run the snippet again.

// Paste this into the DevTools console to confirm File System Access API support.
const pickers = ["showOpenFilePicker", "showSaveFilePicker", "showDirectoryPicker"];
const supported = pickers.filter((method) => method in window);

if (supported.length === pickers.length) {
  console.log("File System Access API pickers available:", supported.join(", "));
} else if (supported.length > 0) {
  console.log("Partial support. Available:", supported.join(", "));
} else {
  console.log("File System Access API pickers are not supported in this browser.");
}

// Separate check for the Origin Private File System half of the API.
if (navigator.storage && "getDirectory" in navigator.storage) {
  console.log("OPFS is available via navigator.storage.getDirectory().");
} else {
  console.log("OPFS is not supported.");
}

If the pickers print as undefined on a Chromium browser, the page is on HTTP. Switch to HTTPS or http://localhost and the names appear on window.

What are the known issues with the File System Access API?

The File System Access API has a small desktop footprint and a long list of platform quirks once you ship it.

• Firefox calls the pickers harmful: Mozilla published a harmful position on showOpenFilePicker, showSaveFilePicker, and showDirectoryPicker. Sites that need disk access on Firefox have to fall back to <input type="file"> for reads and <a download> for writes.
• No pickers on Safari, iOS, or iPadOS: Safari ships only the Origin Private File System. iPhone and iPad visitors cannot pick a file or save to disk through the API in any version.
• No pickers on Android: Chrome for Android, Firefox for Android, and Samsung Internet all skip the picker methods. Android web apps that need disk access ship a Trusted Web Activity or use OPFS.
• Secure context only: Pickers throw TypeError on plain HTTP. The page must run on HTTPS or http://localhost or showOpenFilePicker is undefined on window.
• User gesture required: The pickers need a user activation event such as a click. A call from setTimeout, fetch().then, or a load handler throws SecurityError.
• Restricted folders: Chrome blocks the OS root, the Windows directory, the macOS Library, the user's home root, and other system folders. Picks inside them are silently rejected.
• Permission rehydration: Handles stored in IndexedDB survive a page reload, but the page has to call requestPermission again to get write access. Read access stays granted only for the same browser session.

In my experience, the trickiest failure is permission rehydration after IndexedDB rehydrates a handle. Pages that store a directory handle for a project folder look like they still have access on reload, but the very first write throws NotAllowedError. Always re-prompt with requestPermission({ mode: "readwrite" }) on the next user click before you touch the file.

Citations

All File System Access API version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - File System API: developer.mozilla.org/en-US/docs/Web/API/File_System_API
• MDN Web Docs - showOpenFilePicker: developer.mozilla.org/en-US/docs/Web/API/Window/showOpenFilePicker
• MDN Web Docs - showSaveFilePicker: developer.mozilla.org/en-US/docs/Web/API/Window/showSaveFilePicker
• MDN Web Docs - showDirectoryPicker: developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker
• MDN Web Docs - StorageManager.getDirectory: developer.mozilla.org/en-US/docs/Web/API/StorageManager/getDirectory
• WICG - File System Access editor's draft: wicg.github.io/file-system-access
• WHATWG - File System Standard: fs.spec.whatwg.org
• Chrome for Developers - The File System Access API: developer.chrome.com/docs/capabilities/web-apis/file-system-access
• Chrome for Developers - Origin Private File System: developer.chrome.com/docs/capabilities/web-apis/origin-private-file-system
• Chrome Platform Status - Native File System feature: chromestatus.com/feature/6284708426022912
• WebKit - The File System API with Origin Private File System: webkit.org/blog/12257/the-file-system-access-api-with-origin-private-file-system
• WebKit Standards Positions - File System Access: github.com/WebKit/standards-positions/issues/28
• Mozilla Specification Positions: mozilla.github.io/standards-positions