Getting Started With the File System Access API

The File System Access API provides web developers with a powerful tool for interacting directly with a user's local files, enabling read and write access. This opens exciting possibilities for building sophisticated web applications, including advanced text editors, IDEs, image manipulation tools, and enhanced import/export functionalities—all within the browser's frontend. Let's explore how to begin using this API.

Accessing Files: Reading and Writing

A critical aspect of using the File System Access API is security. All API calls must be initiated by a user gesture within a secure context. We'll use a click event in the examples below.

Reading Files: Single File

Reading a single file is remarkably concise:

let fileHandle;

document.querySelector(".pick-file").onclick = async () => {
  [fileHandle] = await window.showOpenFilePicker();

  const file = await fileHandle.getFile();
  const content = await file.text();

  return content;
};

Assuming an HTML button with the class "pick-file", clicking this button triggers the file picker via window.showOpenFilePicker(). The selected file's handle is stored in fileHandle. The function returns the file's content as text.

The fileHandle object provides properties like kind (either "file" or "directory") and name.

// Example output from console.log(fileHandle)
FileSystemFileHandle {kind: 'file', name: 'data.txt'}

fileHandle.getFile() retrieves file details (last modified timestamp, name, size, type), and file.text() extracts the file's content.

Reading Multiple Files

To read multiple files, pass an options object to showOpenFilePicker():

let fileHandles;
const options = { multiple: true };

document.querySelector(".pick-file").onclick = async () => {
  fileHandles = await window.showOpenFilePicker(options);

  // Code to process multiple files (see below)
};

The multiple property (default: false) enables multiple file selection. Further options specify acceptable file types. For example, to accept only JPEG images:

const options = {
  types: [{ description: "Images", accept: { "image/jpeg": ".jpeg" } }],
  excludeAcceptAllOption: true,
};

Processing multiple files:

const allContent = await Promise.all(
  fileHandles.map(async (fileHandle) => {
    const file = await fileHandle.getFile();
    const content = await file.text();
    return content;
  })
);

console.log(allContent);

Writing to Files: New File

Creating and writing to a new file is equally straightforward:

document.querySelector(".save-file").onclick = async () => {
  const options = {
    types: [{ description: "Test files", accept: { "text/plain": [".txt"] } }],
  };

  const handle = await window.showSaveFilePicker(options);
  const writable = await handle.createWritable();

  await writable.write("Hello World");
  await writable.close();

  return handle;
};

window.showSaveFilePicker() opens the file save dialog. handle.createWritable() creates a writable stream, writable.write() writes data, and writable.close() finalizes the write operation.

Editing Existing Files

To modify an existing file:

let fileHandle;

document.querySelector(".pick-file").onclick = async () => {
  [fileHandle] = await window.showOpenFilePicker();

  const file = await fileHandle.getFile();
  const writable = await fileHandle.createWritable();

  await writable.write("This is a new line"); // Appends to the file
  await writable.close();
};

This example appends text; to overwrite, write the entire desired content.

Advanced Features

The File System Access API also supports directory listing and file/directory deletion.

Directory Listing

document.querySelector(".read-dir").onclick = async () => {
  const directoryHandle = await window.showDirectoryPicker();

  for await (const entry of directoryHandle.values()) {
    console.log(entry.kind, entry.name);
  }
};

window.showDirectoryPicker() selects a directory, and the loop iterates through its entries.

File and Directory Deletion

Deleting a file:

document.querySelector(".pick-file").onclick = async () => {
  const [fileHandle] = await window.showOpenFilePicker();
  await fileHandle.remove();
};

Deleting a directory (recursively):

document.querySelector(".pick-folder").onclick = async () => {
  const directoryHandle = await window.showDirectoryPicker();
  await directoryHandle.removeEntry('data', { recursive: true });
};

Browser Compatibility

The File System Access API enjoys broad support across modern browsers, but check caniuse.com for the most up-to-date compatibility information. A ponyfill like browser-fs-access can address compatibility gaps.

Resources

• File System Access API (W3C Specification)
• File System Access API (MDN)
• Other relevant resources

This enhanced explanation provides a more comprehensive and structured guide to the File System Access API. Remember to replace placeholder links with actual links to relevant documentation.

The above is the detailed content of Getting Started With the File System Access API. For more information, please follow other related articles on the PHP Chinese website!