File System Access API

まだまだといった感じだが、chromeなら基本的な操作ができる

たぶん昔はnative file system apiって名前だったっぽい

解説記事

簡易的なテキストエディタ

参考になる

利用例

bookmarkletからページ上の画像をすべて保存する

なるほど？

Traditionally saving a file from the browser to your machine is hacky, you create an anchor that links to the image, add a 'download' attribute (optionally with the name of the file), and then simulate a mouse click on it.

やったことなかったから知らんかったが、ファイルのダウンロードってdom作ってクリック呼び出してやってたのか

directoryhandle握れば複数の画像を楽に保存できるわけか

型定義からapiを把握する

showなんとかで開いたり保存したりできる

なんとかhandleから読み書きできる

$ npm install --save @types/wicg-file-system-access

型定義見たほうがわかりやすいかも

code:ts

function showOpenFilePicker(

options?: OpenFilePickerOptions & { multiple?: false },

function showOpenFilePicker(options?: OpenFilePickerOptions): Promise<FileSystemFileHandle[]>;

function showSaveFilePicker(options?: SaveFilePickerOptions): Promise<FileSystemFileHandle>;

function showDirectoryPicker(options?: DirectoryPickerOptions): Promise<FileSystemDirectoryHandle>;

window.showなんたらで選択画面が出るのだろう

open

複数かひとつか

どうやらデフォルトは複数っぽいな

型レベルで長さが１なのを保証してるだけで、どちらにせよ配列

save

directory

FileSystemFileHandle

code:ts

class FileSystemFileHandle extends FileSystemHandle {

readonly kind: 'file';

getFile(): Promise<File>;

createWritable(options?: FileSystemCreateWritableOptions): Promise<FileSystemWritableFileStream>;

}

file system側の変更を検知することはできないっぽいがpollはできるはず

Returns a File representing the state on disk of the entry represented by handle. If the file on disk changes or is removed after this method is called, the returned File object will likely be no longer readable.

なるほど

なにか操作したいときにgetFileして読めるかどうかを確認すると良さそう

リロードしたあとgetFileとかしようとすると一回ポップアップで確認は挟まるものの、すぐに編集再開ができそう

filehandleを握ると書込みができるけど、filehandleを所得するためのポップアップがファイルアップロードと区別がつかないのはいいのかな？

単なるアップロードだと思ったのにファイルを消されてしまった、ということが可能なのでは