File Select Dialog

はじめに

JavaScript からファイル選択ダイアログを直接呼び出します。 Promise でFileまたはFileListオブジェクトを取得します。 <inputtype =" file ">ハックはもう必要ありません。

デモ

リリースノート

最新バージョン: npm

各バージョンの詳細なリリースノートは、GitHubで確認できます。

導入する

file-select-dialog をプロジェクトに追加するには、2 つの方法があります。

  • CDN を通じて パッケージをインポートします。
  • npm を使用してインストールします。

CDN

プロトタイピングなどの目的で、次の最新バージョンを使用できます。

<script src="https://unpkg.com/file-select-dialog"></script>

<script>
  function onClick() {
    const fileList = fileSelectDialog.fileDialog()
  }
</script>

<body>
  <button onclick="onClick()">Button</button>
</body>

npm

with Yarn

yarn add file-select-dialog

with NPM

npm i file-select-dialog

このモジュールにはデフォルトのエクスポートはありません。関数はひとつだけ公開されています。

import { fileDialog } from 'file-select-dialog'

使い方

デフォルトでは、単一のファイルのみの選択に制限してFileListオブジェクトを取得できます。

const onClick = async () => {
  // ファイル選択ダイアログを開き、ユーザーの選択を待ってから、FileListオブジェクトを返します。
  const fileList = await fileDialog()
}

multipleパラメータがtrueの場合、複数のファイル選択を許容し、FileListオブジェクトを取得できます。

const onClick = async () => {
  const fileList = await fileDialog({ multiple: true })
}

acceptパラメータは、選択可能なファイルタイプを制限します。

const onClick = async () => {
  const fileList = await fileDialog({ accept: '.png' })

  // 複数のファイルタイプ
  const fileList = await fileDialog({ accept: ['.jpg', '.pdf'] })
}

⚡️ 高度な使い方

multipleのパラメータがfalseで、strictがtrueの場合、Fileオブジェクトを直接取得できます。 エディタはFileオブジェクトを推論します。

const onClick = async () => {
  const file = await fileDialog({ strict: true })

  // 以下と等価
  const file = await fileDialog().then((fileList) => fileList[0])
}