Electron - 正確使用 fs dialog

[NaClYen]

前情提要

剛接觸 Electron 的時候最首要的就是要能和 local files 互動(), 但都找不到很全面說明...
當時僅拼湊出一個可用的, 但顯然不安全的作法.
因為是對內使用的專案, 安全性問題就先放一邊, 解決問題先~XD

最近在轉寫成 react 版本, 因為底層模板整個不同, 重新 survey 之下終於看到一個相對完整的討論串&說明

錯誤訊息

Uncaught TypeError: Cannot read property 'dialog' of undefined

實際案例 - easy way

base on electron-react-boilerplate

• 修改 .\src\main.dev.ts
  在 new BrowserWindow() 的參數中加入啟動 remote 模組

    mainWindow = new BrowserWindow({
      show: false,
      width: 1024,
      height: 728,
      icon: getAssetPath('icon.png'),
      webPreferences: {
        enableRemoteModule: true, // <<<<< here
        nodeIntegration: true,
      },
    });
  

• 使用方式

  import React from 'react';
  import { remote } from 'electron'; // <<<<< import here
  
  function Test9() {
    const onClick = () => {
      remote.dialog // <<<<< use as usual
        .showOpenDialog({
          title: 'open file',
          buttonLabel: 'Load',
        })
        .then((result) => {
          console.log(`file loaded: ${JSON.stringify(result)}`);
          return true;
        })
        .catch((e) => console.error(e));
    };
    return (
      <div>
        <button type="button" onClick={onClick}>
          open
        </button>
      </div>
    );
  }
  
  export default Test9;
  

(嚴謹案例之後補上XD)