Window: showOpenFilePicker() メソッド

構文

showOpenFilePicker()
showOpenFilePicker(options)

引数

options 省略可

以下のオプションを含むオブジェクトです。

excludeAcceptAllOption 省略可

論理値で、デフォルトは false です。 通常、ピッカーは (以下の type オプションに基づく) ファイル形式フィルターを何も適用しない選択肢を含むはずです。このオプションを true にすると、この選択肢を利用 不可能 にします。

id 省略可

ID を指定すると、ブラウザーは ID ごとに異なるディレクトリーを記憶できます。同じ ID を別のピッカーで使用すると、そのピッカーは同じディレクトリーで開きます。

multiple 省略可

論理値で、デフォルトは false です。true に設定すると、複数のファイルを選択できるようになります。

startIn 省略可

ダイアログを開く場所として、FileSystemHandle または既知のディレクトリー ("desktop", "documents", "downloads", "music", "pictures", "videos") を指定します。

types 省略可

選択可能なファイル形式の配列です。各項目は、以下のオプションを持つオブジェクトです。

description 省略可

選択可能なファイル形式のカテゴリーの説明です。省略可能で、デフォルトは空文字列です。

accept

キーを MIME タイプ、値をファイルの拡張子の配列とする Object です。(例は以下を参照してください)

返値

FileSystemFileHandle オブジェクトの配列で解決する Promise を返します。

例外

AbortError DOMException

ユーザーが選択せずにプロンプトを閉じた場合、またはユーザーエージェントが選択されたファイルをウェブサイトに開示するにはセンシティブまたは危険すぎると判断した場合に発生します。

SecurityError DOMException

呼び出しが同一オリジンポリシーによってブロックされた場合、またはボタンの押下など、ユーザーの操作によって呼び出されなかった場合に発生します。

TypeError

accept で指定されたファイル形式を処理できない場合に発生します。たとえば、次のような場合です。

• types 内のいずれかの項目にある accept オプションのキー文字列が、有効な MIME タイプとして構文解析できない。
• types 内のいずれかの項目にある accept オプションの値文字列が無効である。たとえば、. で始まらない、. で終わる、無効なコードポイントを含み、かつ長さが 16 を超える場合など。
• types オプションが空で、excludeAcceptAllOption オプションが true である。

セキュリティ

ユーザーによる一時的な有効化が必要です。この機能が動作するには、ユーザーがページまたは UI 要素を操作する必要があります。

例

このメソッドに渡すオプションオブジェクトを設定します。画像のファイル形式の選択を許可し、すべてのファイル形式の選択や複数ファイルの選択は許可しません。

const pickerOpts = {
  types: [
    {
      description: "Images",
      accept: {
        "image/*": [".png", ".gif", ".jpeg", ".jpg"],
      },
    },
  ],
  excludeAcceptAllOption: true,
  multiple: false,
};

そして、ファイルピッカーを表示して選択されたファイルを返す非同期の関数を作成できます。

// ファイルハンドルへの参照を作成する
let fileHandle;

async function getFile() {
  // ファイルピッカーを開き、返される 1要素の配列を展開する
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // fileHandle を用いてコードを実行する
}

仕様書

ブラウザーの互換性

関連情報

• File System API
• The File System Access API: simplifying access to local files