When developing WebApp, you may encounter file-related operations, such as uploading files to the server, downloading files to the local, caching files, etc. The following will introduce several different ways to process files. operate.

Tag-based upload and download

The most common way to upload files is to use the input tag. By setting the type="file" of the input tag, you can allow users to select files locally for upload.

function InputFile() {
    const [file, setFile] = useState(null);
    const handleChange = (e: React.ChangeEvent) => {
    const file = e.target.files?.[0];
    if (!file) return;
    setFile(file);
  };
    return 
}

File access API

File System Access API (File System Access API) is part of the file system API. Files can be read and written under the user's operation by using the API.

The following interface will be used when using this API for file operations

• showOpenFilePicker: used to display a file picker and allow the user to select one or more files, and then return handles to these files;

export function PickerFS() {
    const [file, setFile] = useState(null);
    const handleChooseFile = async () => {
    const fileHandles = await window.showOpenFilePicker();
    const file = await fileHandles[0].getFile();
    setFile(file);
  };
  return Click
}

• showSaveFilePicker: used to display a file picker and allow the user to save a file (overwrite or create a new one);

export function PickerFS() {
    const handleChooseFile = async () => {
    const directoryHandle = await window.showDirectoryPicker();
    const keys = directoryHandle.keys();
    // 打印该目录下所有文件的名字
    for await (const key of keys) {
      console.log(key);
    }
  };
  return Click
}

• showDirectoryPicker: used to display a directory selector and allow the user to select a directory;

export function PickerFS() {
    const [file, setFile] = useState(null);
    const handleDownloadFile= async () => {
    const opts = {
      suggestedName: "test.txt",
      types: [
        {
          description: "Text file",
          accept: { "text/plain": [".txt"] },
        },
      ],
    };

    const fileHandle = await window.showSaveFilePicker(opts);
    const writable = await fileHandle.createWritable();
    await writable.write("Hello, world!");
    await writable.close();
  };
  return Click
}

Source Private File System

The source private file system is similar to the file access system above and is part of the file system API. However, the most direct difference between them is whether it is visible to the user. The showXXX interfaces all need to open the file (directory) selector, and the user needs to actively select the file (directory). The saved file also needs to be saved to the path specified by the user, but the interaction of the source private file system will not be visible to the user, and the saved file The files are processed data and the original data cannot be seen by the user.

export function OpFs() {
  const handleChooseFile = async (event: React.ChangeEvent) => {
    const fileList = event.target.files;
    const file = fileList && fileList[0];
    if (!file) return;

    const opfsRoot = await navigator.storage.getDi rectory();
    const fileHandle = await opfsRoot.getFileHandle(file.name, { create: true });
    const writable = await fileHandle.createWritable();
    await writable.write(file);
    await writable.close();
  };

  return ;
}

await navigator.storage.getDirectory() returns a file handle representing the root directory of the user's local file system, and then obtains the handle of the specified file through getFileHandle. create is true, which means that if the file does not exist, it will create one, and then use createWritable Create a writable stream. Developers can write data to the specified file through this writable stream, and finally close the writable stream.

Things to note

? The file access system is very similar to the source file system in use. Access to specific files or directories requires a file handle (FileSystemFileHandle) or a folder handle (FileSystemDirectoryHandle).

The handle can be understood as a wrapper for the file itself, and the file is read (getFile) and written (createWritable) through the interface of the handle.

See

• https://web.dev/articles/origin-private-file-system?hl=zh-cn#specifics_of_the_origin_private_file_system
• https://developer.chrome.com/docs/capabilities/web-apis/file-system-access?hl=zh-cn
• https://gine.me/posts/70f8e931bc17426fb54127948bcf4a0e
• https://hughfenghen.github.io/posts/2024/03/14/web-storage-and-opfs/