FileSystem

• https://wicg.github.io/file-system-access/
  • explainer
• https://w3c.github.io/FileAPI/
• https://web.dev/file-system-access/
  • fs-helpers.js
• https://web.dev/browser-fs-access/
• Chrome
  • Chrome 86+
    • window.showOpenFilePicker
    • navigator.storage.getDirectory
• dataurl 支持 blob:, filesystem:
• <a href="" download="filename.txt"> - 触发下载
  • download 依赖服务端返回 Content-Disposition

const dirHandle = await window.showDirectoryPicker();

const saveFileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [
    {
      description: 'Text documents',
      accept: {
        'text/plain': ['.txt'],
      },
    },
  ],
});

const openFileHandle = await self.showOpenFilePicker({
  // desktop, documents, downloads, music, pictures, videos
  startIn: 'pictures',
  // startIn: dirHandle,
});

// 创建目录
const neoDirHandle = await dirHandle.getDirectoryHandle('neo', { create: true });
// 创建文件
const readmeFileHandle = await neoDirHandle.getFileHandle('README.txt', { create: true });
// 删除文件
await neoDirHandle.removeEntry('README.txt');
// 递归删除目录
await dirHandle.removeEntry('neo', { recursive: true });

Origin Private File System

• OPFS - Origin Private File System
• chromestatus
  • dev 94, trail 95, shiping 99

// FileSystemDirectoryHandle
const root = await navigator.storage.getDirectory();

Drop as Handle

drop-handle.js

elem.addEventListener('dragover', (e) => {
  // Prevent navigation.
  e.preventDefault();
});

elem.addEventListener('drop', async (e) => {
  // Prevent navigation.
  e.preventDefault();
  // Process all of the items.
  for (const item of e.dataTransfer.items) {
    // Careful: `kind` will be 'file' for both file
    // _and_ directory entries.
    if (item.kind === 'file') {
      const entry = await item.getAsFileSystemHandle();
      if (entry.kind === 'directory') {
        handleDirectoryEntry(entry);
      } else {
        handleFileEntry(entry);
      }
    }
  }
});