Perform file operations in the browser

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 input tag’s type="file", you can allow users to select files locally for upload.

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

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 interfaces 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<file null>(null);
    const handleChooseFile = async () => {
    const fileHandles = await window.showOpenFilePicker();
    const file = await fileHandles[0].getFile();
    setFile(file);
  };
  return <button onclick="{handleChooseFile}">Click</button>
}
</file>

• 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 <button onclick="{handleChooseFile}">Click</button>
}

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

export function PickerFS() {
    const [file, setFile] = useState<file null>(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 <button onclick="{handleDownloadFile}">Click</button>
}
</file>

Source Private File System

The source private file system is similar to the file access system above, both are part of the file system API, but the most direct difference between them is whether they are visible to users. 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<htmlinputelement>) => {
    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 <inputfile onchange="{handleChooseFile}"></inputfile>;
}
</htmlinputelement>

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 the packaging of 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/

The above is the detailed content of Perform file operations in the browser. For more information, please follow other related articles on the PHP Chinese website!