LoginSignup
19

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-12-09

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
19