Electronでファイルダイアログを出してパスを取得する

表題の通り。シンプルにElectronでファイルダイアログを行いたかった。html要素で単純に実装すると、ちゃんとしたパスを扱うことはできない。のでElectronから用意されている方法を使う。

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

Electron でダイアログを開いてファイルを開く／保存 - Qiita

使う。

ディレクトリを参照する場合も同じ方法で行う。

electron/electron

ドキュメント。

dialog.showOpenDialogSync([browserWindow, ]options)

で同期

dialog.showOpenDialog([browserWindow, ]options)

で非同期でファイル選択ダイアログを使える。私は特に同時にやりたい処理もないので前者を選択。

テストなのでレンダー側、index.htmlのscriptsタグに直接ぶち込んでみる。

    <script>
       window.jQuery = window.$ = require('jquery');

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

       function openFileDialog() {
           let filename = dialog.showOpenDialogSync(null, {
               properties: ['openFile'],
               title: 'Select a text file',
               defaultPath: '.',
               filters: [
                   {name: 'text file', extensions: ['txt']}
               ]
           });
           return filename;
       }

       $(function () {
           $("#selectFile").click(function () {
               let filename = openFileDialog();
               console.log(filename);
           })
       })
   </script>

レンダー側でelectronの機能を扱う場合はremoteで呼び出す。本来だとこれはメイン側で実装するべきなんだろうなと思いながらそのまま続ける。

jqueryでボタンをクリックしたら関数実行。ダイアログを表示、選択したらコンソールに書き出すシンプルなもの。

動いた。配列でパスを読み込めていることがわかる。やったぜ。

            let filename = dialog.showOpenDialogSync(null, {
               properties: ['openDirectory'],
               title: 'Select a text file',
               defaultPath: '.',
               filters: [
                   {name: 'text file', extensions: ['txt']}
               ]

プロパティにopenDirectoryを指定するとディレクトリ選択ダイアログにすることができる。

ダイアログは問題無く表示され、ディレクトリのパスが配列で取得された。