FileSystemHandle.remove()

options 省略可

削除のオプションを指定するオブジェクトです。以下のプロパティを設定できます。

recursive 省略可

boolean 値で、デフォルトは false です。true に設定し、エントリーがディレクトリーである場合は、内容が再帰的に削除されます。

undefined で解決される Promise を返します。

InvalidModificationError DOMException

recursive が false に設定されており、削除するエントリーが子を持つディレクトリーであるとき投げられます。

NoModificationAllowedError DOMException

ブラウザーがエントリーの排他的ロックを得られなかったとき投げられます。

NotAllowedError DOMException

PermissionStatus が granted でないとき投げられます。

NotFoundError DOMException

エントリーが見つからないとき投げられます。

FileSystemHandle.remove() demo (ソースコードを見る) はファイル作成アプリケーションです。<textarea> にテキストを入力して "Save file" <button> を押すと、ファイルピッカーが開き、入力したテキストをローカルファイルシステム上の選択したテキストファイルに保存できます。作成したファイルを削除することを選択することもできます。

作成したファイルの内容を閲覧することはできず、ページを再読み込みしたり閉じたりすると下層のファイルシステムとの同期は失われます。すなわち、このアプリケーションで作成したファイルは、再読み込みしたりタブを閉じたりする前に削除することを選択しなければ、ファイルシステムに残り続けます。

ファイルピッカー、ファイルハンドル、そして新規ファイルを作成したときのファイル自体は、window.showSaveFilePicker() により作成されます。テキストは FileSystemFileHandle.createWritable() を用いてファイルに書き込まれます。

ファイルがファイルシステム上に作成されると、アプリケーション上でエントリーが作成されます。(ソースコード中の processNewFile() を参照してください)

• 後で簡単に参照できるように、ファイルハンドルへの参照が配列 savedFileRefs に格納されます。
• UI の中の "Saved files" という見出しの下に、ファイル名の隣に "Delete" ボタンがあるリストの項目が追加されます。

"Delete" ボタンが押されると、以下の deleteFile() 関数が実行されます。

async function deleteFile(e) {
  for (const handle of savedFileRefs) {
    if (handle.name === e.target.id + ".txt") {
      await handle.remove();
      savedFileRefs = savedFileRefs.filter(
        (handle) => handle.name !== e.target.id + ".txt",
      );
      e.target.parentElement.parentElement.removeChild(e.target.parentElement);
    }
  }
}

これは以下のような処理です。

1. 配列 savedFileRefs に格納されている各ファイルハンドルについて、名前がイベントを発生させたボタンの属性 id と一致するかを調べます。
2. 一致するファイルハンドルが見つかったら、そのハンドルについて FileSystemHandle.remove() を呼び出し、下層のファイルシステムからそのファイルを削除します。
3. 配列 savedFileRefs からも一致したファイルシステムを削除します。
4. 最後に、UI からそのファイルに対応するリスト項目を削除します。

• File System Access API
• FileSystemHandle.remove() demo