FileSystemHandle.remove()

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

FileSystemHandle インターフェイスの remove() メソッドは、下層のファイルシステムからハンドルが表すエントリーを除去することを要求します。

remove() メソッドにより、ハンドルを用いてファイルやディレクトリーを直接削除することができます。このメソッドが無い場合に削除をおこなうには、親ディレクトリーのハンドルを取得し、その親ディレクトリーで FileSystemDirectoryHandle.removeEntry() メソッドを呼ぶ必要があるでしょう。

オリジンプライベートファイルシステムのルートディレクトリーで remove() を呼ぶことで内容を全消去することもでき、これをおこなった後は新しい空の OPFS が作成されます。

構文

js
remove(options)

引数

options 省略可

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

recursive 省略可

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

返値

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

例外

InvalidModificationError DOMException

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

NoModificationAllowedError DOMException

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

NotAllowedError DOMException

PermissionStatusgranted でないとき投げられます。

NotFoundError DOMException

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

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

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

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

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

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

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

js
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 からそのファイルに対応するリスト項目を削除します。

仕様書

No specification found

No specification data found for api.FileSystemHandle.remove.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性

BCD tables only load in the browser

関連情報