文件系统访问演示 - File System Access API

The File System Access API is a modern web API that allows web applications to read and write files and directories on the user's local device — with explicit user permission. Unlike traditional <input type="file">, it provides persistent file handles and full read/write capabilities, enabling desktop-class file interactions directly in the browser.

The File System Access API is supported in Chromium-based browsers: Google Chrome 86+, Microsoft Edge 86+, and Opera 72+. It is not supported in Firefox or Safari as of 2025. Additionally, it requires a secure context — the page must be served over HTTPS or from localhost.

No. The API is designed with a strong security model. Websites cannot access any file or directory without the user explicitly selecting it through a native file/folder picker dialog. The browser always shows a clear permission prompt. File handles obtained are scoped to the current browsing session and origin. This ensures users remain in full control of their files.

Traditional file upload (<input type="file">) only provides read-only access to a copy of selected files. The File System Access API provides bidirectional access — you can read and write files directly on the user's disk, browse entire directory structures, create new files, and maintain persistent handles for future sessions.

The File System Access API is classified as a powerful feature by browser security standards. Powerful features that could compromise user privacy or security are restricted to secure contexts (HTTPS or localhost). This prevents man-in-the-middle attacks and ensures the integrity of the permission model.

Yes! File and directory handles can be stored in IndexedDB using their serializable form. When restored, you may need to call handle.queryPermission() and handle.requestPermission() to regain access. The browser may re-prompt the user for confirmation, especially after extended periods.

The API supports: reading files (via getFile()), writing files (via createWritable()), creating new files and directories, deleting files and directories, renaming/moving entries, and iterating directory contents. It also supports streaming writes for large files via FileSystemWritableFileStream.

For large files, avoid reading the entire file into memory. Instead, use streaming: const writable = await handle.createWritable(); await readableStream.pipeTo(writable);. For reading, use file.stream() to get a ReadableStream and process chunks incrementally. This keeps memory usage low regardless of file size.

Common use cases include: code editors & IDEs (VS Code web), image/video editors, document editors, file management tools, backup utilities, batch processing tools, and any application that benefits from direct local file system access without a round-trip to a server.

If a user revokes permission (via browser settings) or moves/deletes the file externally, subsequent operations on the stored file handle will throw a NotAllowedError or NotFoundError. Applications should gracefully handle these errors and prompt the user to re-select the file or directory.