JS File System API

FileSystem - {name,root}
- Chrome 7, Safari 11.1
FileSystemEntry
- FileSystemEntry
- FileSystemDirectoryEntry
  - FileSystemDirectoryEntry.createReader()
- FileSystemDirectoryReader
FileSystemHandle
- .kind = directory | file
- FileSystemDirectoryHandle
  - .entries()
类型定义
- 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()
- wpt.fyi/results/entries-api/idlharness.window.html
- wpt.fyi/results/file-system-access
- fs.spec.whatwg.org

JavaScript

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);

TypeScript

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

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

关联信息

参考资料