EN: A simple, high-performance, and comprehensive file system API running in the browser, built on OPFS.

CN: 在浏览器中运行的简单、高性能、完备的文件系统 API，基于 OPFS 构建。

API Documentation | Tips

Benchmark

Usage

1import { file, dir, write } from 'opfs-tools';
2
3// --------- Create / Write ---------
4await dir('/test-dir').create(); // create a directory
5
6await write('/dir/file.txt', ''); // empty file
7await write('/dir/fetch-file', (await fetch('//example.com')).body);
8// inputFile from the input element picked by the user
9await write('/dir/input-file', inputFile.stream());
10
11// For incremental file writes, please refer to the API documentation.
12const writer = await file('/dir/file').createWriter();
13
14// --------- Read ---------
15await file('/dir/file.txt').text();
16await file('/dir/input-file').arrayBuffer();
17await file('/dir/input-file').stream();
18
19// If you want to read file fragments, please refer to the API documentation.
20const reader = await file('/dir/input-file').createReader();
21
22await dir('/test-dir').children();
23
24// --------- Remove ---------
25await dir('/test-dir').remove();
26
27await file('/dir/file.txt').remove();
28
29// --------- copyTo / moveTo ---------
30await file('/dir/file').copyTo(file('/dir/file copy1'));
31await dir('/dir').moveTo(dir('/.Trash'));
32
33// --------- import/export file  -----------
34const [impHandle] = await window.showOpenFilePicker();
35write('/import-file', (await impHandle.getFile()).stream());
36
37const expHandle = await window.showSaveFilePicker({
38  suggestedName: `opfs-export-file`,
39});
40(await file('/export-file').stream()).pipeTo(await expHandle.createWritable());
41
42// --------- upload -------------
43const formData = new FormData();
44formData.append('file', await file('/upload-file').getOriginFile());
45await fetch('/upload', {
46  method: 'post',
47  headers: { 'Content-Type': 'multipart/form-data' },
48  body: formData,
49});

作者的 OPFS 相关文章

DEMOS

• opfs-finder
  使用 AI + OPFS 在浏览器中实现 MacOS Finder。Implement MacOS Finder in the browser using AI + OPFS.

• opfs-tools-explorer
  Manage OPFS assets in your web site, supporting file creation, copying, and moving features, providing a user-friendly interactive experience.
  

Features

• Basic operations
  • file
    • remove
    • exists
  • dir
    • create
    • remove
    • exists
    • children
• Reading files
  • getSize
  • text
  • stream
  • arrayBuffer
• Random reading
  • reader = file.createReader
  • reader.read(bufLen, { at }
  • reader.close
• Writing files
  • write(dest: string, input: string)
  • write(dest: string, input: ArrayBuffer | ArrayBufferView)
  • write(dest: string, input: ReadableStream)
• Random writing
  • writer = file.createWriter
  • writer.write
  • writer.flush
  • writer.truncate
  • writer.close