DataTransferItem: getAsFileSystemHandle() メソッド

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

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

構文

getAsFileSystemHandle()

引数

なし。

返値

Promise です。

アイテムの kind プロパティが "file" であり、このアイテムが dragstart または drop イベントハンドラでアクセスされた場合、返されるプロミスは、ドラッグされたアイテムがファイルであれば FileSystemFileHandle で、ディレクトリーであれば FileSystemDirectoryHandle で履行されます。

それ以外の場合、このプロミスは null で履行されます。

例外

なし。

例

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

メモ: getAsFileSystemHandle() は、 drop イベントハンドラーと同じティック内でのみ項目のハンドルを取得できるため、その前に await を配置してはなりません。これが、まず全てのアイテムに対して getAsFileSystemHandle() を同期的に呼び出し、その後結果を並行して待機する理由です。

js
elem.addEventListener("dragover", (e) => {
  // ナビゲーションを防ぐ
  e.preventDefault();
});
elem.addEventListener("drop", async (e) => {
  // ナビゲーションを防ぐ
  e.preventDefault();
  const handlesPromises = [...e.dataTransfer.items]
    // ファイルやディレクトリーの項目では、kind は 'file' になる
    .filter((x) => x.kind === "file")
    .map((x) => x.getAsFileSystemHandle());
  const handles = await Promise.all(handlesPromises);

  // すべてのアイテムを処理する
  for (const handle of handles) {
    if (handle.kind === "file") {
      // 項目がファイルのとき、コードを実行する
    } else if (handle.kind === "directory") {
      // 項目がディレクトリーのとき、コードを実行する
    }
  }
});