Skip to content

Latest commit

 

History

History
103 lines (80 loc) · 3.53 KB

README.md

File metadata and controls

103 lines (80 loc) · 3.53 KB

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

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

API Documentation | Benchmark

Usage

import { file, dir, write } from 'opfs-tools';

// --------- Create / Write ---------
await dir('/test-dir').create(); // create a directory

await write('/dir/file.txt', ''); // empty file
await write('/dir/fetch-file', (await fetch('//example.com')).body);
// inputFile from the input element picked by the user
await write('/dir/input-file', inputFile.stream());

// For incremental file writes, please refer to the API documentation.
const writer = await file('/dir/file').createWriter();

// --------- Read ---------
await file('/dir/file.txt').text();
await file('/dir/input-file').arrayBuffer();
await file('/dir/input-file').stream();

// If you want to read file fragments, please refer to the API documentation.
const reader = await file('/dir/input-file').createReader();

await dir('/test-dir').children();

// --------- Remove ---------
await dir('/test-dir').remove();

await file('/dir/file.txt').remove();

// --------- copyTo / moveTo ---------
await file('/dir/file').copyTo(file('/dir/file copy1'));
await dir('/dir').moveTo(dir('/.Trash'));

// --------- import/export file  -----------
const [impHandle] = await window.showOpenFilePicker();
write('/import-file', (await impHandle.getFile()).stream());

const expHandle = await window.showSaveFilePicker({
  suggestedName: `opfs-export-file`,
});
(await file('/export-file').stream()).pipeTo(await expHandle.createWritable());

// --------- upload -------------
const formData = new FormData();
formData.append('file', await file('/upload-file').getOriginFile());
await fetch('/upload', {
  method: 'post',
  headers: { 'Content-Type': 'multipart/form-data' },
  body: formData,
});

文章：Web 文件系统（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.
    image

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