File System Access API - Read and Write Local Files

File System Access API Detection

The File System Access API allows web applications to read and write files on the user's local file system through file picker dialogs, bridging the gap between web and desktop applications.

Detection

const hasFileSystemAccess = 'showOpenFilePicker' in window;
const hasSaveFilePicker = 'showSaveFilePicker' in window;
const hasDirectoryPicker = 'showDirectoryPicker' in window;

Opening Files

async function openFile() {
  const [handle] = await window.showOpenFilePicker({
    types: [{
      description: 'Text files',
      accept: { 'text/plain': ['.txt', '.md'] },
    }],
    multiple: false,
  });
  const file = await handle.getFile();
  const text = await file.text();
  return { handle, text };
}

Saving Files

async function saveFile(handle, content) {
  if (!handle) {
    handle = await window.showSaveFilePicker({
      suggestedName: 'document.txt',
      types: [{
        description: 'Text files',
        accept: { 'text/plain': ['.txt'] },
      }],
    });
  }
  const writable = await handle.createWritable();
  await writable.write(content);
  await writable.close();
  return handle;
}

Directory Access

async function openDirectory() {
  const dirHandle = await window.showDirectoryPicker();
  for await (const entry of dirHandle.values()) {
    console.log(entry.kind, entry.name);
  }
}

Security Model

• User gesture required: All picker methods require a recent user interaction
• Per-file permission: Users grant access to individual files or directories
• Revocable: Permissions can be revoked at any time
• No silent access: The API cannot access files without the user explicitly choosing them through the picker

Browser Support

Currently available in Chromium browsers (Chrome, Edge, Opera). Firefox and Safari use different approaches for file access.