Window.showOpenFilePicker()

Limited availability

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

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

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

Window インターフェイスの showOpenFilePicker() メソッドは、ユーザーが単一または複数のファイルを選択できるファイルピッカーを表示し、それらのファイルのハンドルを返します。

構文

js
showOpenFilePicker()

引数

options 省略可

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

  • multiple

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

  • excludeAcceptAllOption

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

  • types

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

      description

      選択可能なファイル形式のカテゴリーの説明で、省略可能です。

      accept

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

返値

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

例外

AbortError

ユーザーが選択せずにプロンプトを閉じた場合や、選択されたファイルがウェブサイトに開示するにはセンシティブであったり危険であったりするとみなされた場合、AbortError が投げられます。

セキュリティ

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

例

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

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

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

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

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

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

仕様書

Specification
File System Access
# api-showopenfilepicker

ブラウザーの互換性

BCD tables only load in the browser

関連情報