DOM

：

：

Window.showOpenFilePicker() メソッド

　編集：2022.09.15 by T.A.

[Edge]。実験的。→、

セキュア コンテキスト： この機能は、一部またはすべてのサポートされているブラウザーで、セキュア コンテキスト（HTTPS）でのみ使用できます。

実験的： これは実験的な技術です。これを本番環境で使用する前に、ブラウザーの互換性テーブルを注意深く確認してください。

このメソッドは、ユーザーがファイルを保存できるようにするファイル ピッカーを表示します。既存のファイルを選択するか、または新しいファイルの名前を入力します。

構文
Window.showSaveFilePicker([options])
Window Window オブジェクト。
options 省略可。オプションを含むオブジェクト：
excludeAcceptAllOption
ブール値。初期値 false。デフォルトでは、ピッカーには、ファイル タイプ フィルタを適用しないオプションが含まれている必要があります（以下の types オプションを使用）。true では types オプションが使用できないことを意味します。
suggestedName
文字列。提案されたファイル名。
types
保存できるファイル タイプの配列。各項目は、次のオプションを持つオブジェクトです。
プロパティ説明
description 文字列。許可されるファイル タイプのカテゴリのオプションの説明。
accept オブジェクト。キー（プロパティ）が MIME タイプ文字列とし、その値は配列でファイル拡張子文字列を羅列する（例を参照）。
戻り値

フル フィルメント ハンドラーが FileSystemFileHandle オブジェクトの配列を受け取る Promise。

例外
AbortError
ユーザーが選択を行わずにプロンプトを閉じた場合、または選択したファイルが機密性が高すぎて Web サイトに公開するには危険であると見なされた場合、AbortError がスローされます。
例

ここでは、メソッドに渡すオプション オブジェクトを設定します。画像ファイルの種類を選択できます。すべてのファイル タイプを許可するオプションがないため、または複数のファイル選択。 

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

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

// create a reference for our file handle
let fileHandle;

async function getFile() {
  // open file picker, destructure the one element returned array
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // run code with our fileHandle
}
テスト