JavaScript
Node.js
Electron

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