JS File System API

• FileSystem - {name,root}
  • Chrome 7, Safari 11.1
• FileSystemEntry
  • FileSystemEntry
  • FileSystemDirectoryEntry
    • FileSystemDirectoryEntry.createReader()
  • FileSystemDirectoryReader
• 类型定义
  • npm:@types/wicg-file-system-access
  • npm:@types/filesystem

获取 FS 的方式

• drop 事件
  • DataTransferItem.webkitGetAsEntry
  • DataTransferItem.getAsFileSystemHandle
• HTMLInputElement.webkitdirectory <input type="file" webkitdirectory>
  • HTMLInputElement.webkitEntries
• Window.showDirectoryPicker
• Window.showOpenFilePicker
• Window.showSaveFilePicker
• Window.requestFileSystem

---

• 参考
  • mdn File and Directory Entries API
  • File System Access
    • Chrome 86
    • Window.{showDirectoryPicker,showOpenFilePicker,showSaveFilePicker}
    • handle.queryPermission()
  • https://wpt.fyi/results/entries-api/idlharness.window.html
  • https://wpt.fyi/results/file-system-access

window.requestFileSystem ||= window.webkitRequestFileSystem;
window.directoryEntry ||= window.webkitDirectoryEntry;

function onFs(fs) {
  fs.root.getDirectory(
    'Documents',
    { create: true },
    function (directoryEntry) {
      //directoryEntry.isFile === false
      //directoryEntry.isDirectory === true
      //directoryEntry.name === 'Documents'
      //directoryEntry.fullPath === '/Documents'
    },
    onError,
  );
}
function onError(e) {
  console.error(e);
}
// Opening a file system with temporary storage
window.requestFileSystem(TEMPORARY, 1024 * 1024 /*1MB*/, onFs, onError);

interface FilePickerAcceptType {
  description: string;
  accept: Record<string, string | string[]>;
}

enum WellKnownDirectory {
  Desktop = 'desktop',
  Documents = 'documents',
  Downloads = 'downloads',
  Music = 'music',
  Pictures = 'pictures',
  Videos = 'videos',
}