Edited at

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

More than 1 year has passed since last update.

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']}
]
});


参考