Electronでファイル選択ダイアログを実装する

Electronでローカルファイルの選択ダイアログを実装するときには、dialogモジュールのshowOpenDialog関数を利用します。HTML <input type="file"> を利用するとファイルの選択ダイアログの表示はできますが、ファイルパスは取得できません。

よく利用する引数

dialog.showOpenDialog([browserWindow, ]options[, callback])

• browserWindow (BrowserWindow) 親となるBrowserWindowsオブジェクトを指定すると、モーダル（表示中に親のウィンドウを無効化する）ウィンドウとして表示できる。
• options (Object)
  • title (String) ダイアログのタイトルに表示する文字列
  • defalutPath (String) 最初に表示するパス
  • buttonLabel (String) 選択ボタンに表示する文字列
  • filters (FileFilter[]) 選択対象のファイル種別
    • 例：filters: [{name: 'Images', extensions: ['jpg', 'png', 'gif']}]
  • properties (String[]) ダイアログの機能
    • openFile ファイルを選択する
    • openDirectory ディレクトリを選択する
    • multiSelections 複数選択を許可する
• callback 選択されたファイルパスの配列を引数に取るコールバック関数。省略した場合はshowOpenDialogメソッドの戻り値で配列が返却される。

実装例

const dialog = require('electron').remote.dialog;

let filenames = dialog.showOpenDialog(null, {
	properties: ['openFile'],
	title: 'Select a text file',
	defaultPath: '.',
	filters: [
		{name: 'text file', extensions: ['txt']}
	]
});

参考

• GitHub electron dialog