DataTransferItem.getAsFileSystemHandle()

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

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

getAsFileSystemHandle() は DataTransferItem インターフェイスのメソッドで、ドラッグ中の項目がファイルであれば FileSystemFileHandle を、ドラッグ中の項目がディレクトリーであれば FileSystemDirectoryHandle を返します。

構文

js
getAsFileSystemHandle()

引数

なし。

返値

Promise で、FileSystemFileHandle または FileSystemDirectoryHandle で履行されます。

例外

なし。

例

この例では、getAsFileSystemHandle メソッドを使用して、ドロップした項目に対して ファイルハンドル を返します。

js
elem.addEventListener("dragover", (e) => {
  // ナビゲーションを防ぐ
  e.preventDefault();
});
elem.addEventListener("drop", async (e) => {
  // ナビゲーションを防ぐ
  e.preventDefault();

  // すべてのアイテムを処理する
  for (const item of e.dataTransfer.items) {
    // ファイルやディレクトリーの項目では、kind は 'file' になる
    if (item.kind === "file") {
      const entry = await item.getAsFileSystemHandle();
      if (entry.kind === "file") {
        // 項目がファイルのとき、コードを実行する
      } else if (entry.kind === "directory") {
        // 項目がディレクトリーのとき、コードを実行する
      }
    }
  }
});

仕様書

Specification
File System Access
# dom-datatransferitem-getasfilesystemhandle

ブラウザーの互換性

BCD tables only load in the browser

関連情報