added simple file picker

electron-src/index.ts

@@ -6,6 +6,7 @@ import { format } from 'url'
 import { BrowserWindow, app, ipcMain, IpcMainEvent } from 'electron'
 import isDev from 'electron-is-dev'
 import prepareNext from 'electron-next'
+const { dialog } = require('electron')
 
 // Prepare the renderer once the app is ready
 app.on('ready', async () => {
@@ -36,7 +37,15 @@ app.on('ready', async () => {
 app.on('window-all-closed', app.quit)
 
 // listen the channel `message` and resend the received message to the renderer process
-ipcMain.on('message', (event: IpcMainEvent, message: any) => {
-  console.log(message)
-  setTimeout(() => event.sender.send('message', 'hi from electron'), 500)
+ipcMain.on('file', async (event: IpcMainEvent) => {
+  const {canceled, filePaths} = await dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] })
+  if (canceled) {
+    console.log('operation cancelled')
+    setTimeout(() => event.sender.send('filename', 'operation cancelled'), 500)
+  }
+  else {
+    console.log(filePaths[0])
+    setTimeout(() => event.sender.send('filename', filePaths[0]), 500)
+  }
+  
 })

main/index.js

@@ -10,6 +10,7 @@ const url_1 = require("url");
 const electron_1 = require("electron");
 const electron_is_dev_1 = __importDefault(require("electron-is-dev"));
 const electron_next_1 = __importDefault(require("electron-next"));
+const { dialog } = require('electron');
 // Prepare the renderer once the app is ready
 electron_1.app.on('ready', async () => {
     await (0, electron_next_1.default)('./renderer');
@@ -34,7 +35,14 @@ electron_1.app.on('ready', async () => {
 // Quit the app once all windows are closed
 electron_1.app.on('window-all-closed', electron_1.app.quit);
 // listen the channel `message` and resend the received message to the renderer process
-electron_1.ipcMain.on('message', (event, message) => {
-    console.log(message);
-    setTimeout(() => event.sender.send('message', 'hi from electron'), 500);
+electron_1.ipcMain.on('file', async (event) => {
+    const { canceled, filePaths } = await dialog.showOpenDialog({ properties: ['openFile', 'multiSelections'] });
+    if (canceled) {
+        console.log('operation cancelled');
+        setTimeout(() => event.sender.send('filename', 'operation cancelled'), 500);
+    }
+    else {
+        console.log(filePaths[0]);
+        setTimeout(() => event.sender.send('filename', filePaths[0]), 500);
+    }
 });

renderer/.next/build-manifest.json

@@ -29,11 +29,6 @@
       "static/chunks/webpack.js",
       "static/chunks/main.js",
       "static/chunks/pages/_error.js"
-    ],
-    "/initial-props": [
-      "static/chunks/webpack.js",
-      "static/chunks/main.js",
-      "static/chunks/pages/initial-props.js"
     ]
   },
   "ampFirstPages": []

renderer/.next/server/pages-manifest.json

@@ -2,6 +2,5 @@
   "/_app": "pages/_app.js",
   "/_error": "pages/_error.js",
   "/_document": "pages/_document.js",
-  "/": "pages/index.js",
-  "/initial-props": "pages/initial-props.js"
+  "/": "pages/index.js"
 }

renderer/.next/static/chunks/webpack.js

@@ -128,7 +128,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	!function() {
-/******/ 		__webpack_require__.h = function() { return "607e8ec64abecbff"; }
+/******/ 		__webpack_require__.h = function() { return "f5a3a7d3f75de4fc"; }
 /******/ 	}();
 /******/ 	
 /******/ 	/* webpack/runtime/global */

renderer/.next/static/development/_buildManifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST = {__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static\u002Fchunks\u002Fpages\u002Findex.js"],"/_error":["static\u002Fchunks\u002Fpages\u002F_error.js"],"/initial-props":["static\u002Fchunks\u002Fpages\u002Finitial-props.js"],sortedPages:["\u002F","\u002F_app","\u002F_error","\u002Finitial-props"]};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()
+self.__BUILD_MANIFEST = {__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static\u002Fchunks\u002Fpages\u002Findex.js"],"/_error":["static\u002Fchunks\u002Fpages\u002F_error.js"],sortedPages:["\u002F","\u002F_app","\u002F_error"]};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()

renderer/.next/static/webpack/f320c99a8c730992.webpack.hot-update.json

@@ -1 +0,0 @@
-{"c":["webpack"],"r":[],"m":[]}

renderer/.next/static/webpack/webpack.11adbe7b02208243.hot-update.js

@@ -35,7 +35,7 @@ self["webpackHotUpdate_N_E"]("webpack",{},
 /******/ 
 /******/ /* webpack/runtime/getFullHash */
 /******/ !function() {
-/******/ 	__webpack_require__.h = function() { return "f320c99a8c730992"; }
+/******/ 	__webpack_require__.h = function() { return "f5a3a7d3f75de4fc"; }
 /******/ }();
 /******/ 
 /******/ /* webpack/runtime/make namespace object */

renderer/.next/static/webpack/webpack.f320c99a8c730992.hot-update.js

@@ -1,18 +0,0 @@
-"use strict";
-/*
- * ATTENTION: An "eval-source-map" devtool has been used.
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file with attached SourceMaps in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-self["webpackHotUpdate_N_E"]("webpack",{},
-/******/ function(__webpack_require__) { // webpackRuntimeModules
-/******/ /* webpack/runtime/getFullHash */
-/******/ !function() {
-/******/ 	__webpack_require__.h = function() { return "607e8ec64abecbff"; }
-/******/ }();
-/******/ 
-/******/ }
-);

renderer/pages/index.tsx

@@ -4,24 +4,24 @@ import Layout from '../components/Layout'
 
 const IndexPage = () => {
   useEffect(() => {
-    const handleMessage = (_event, args) => alert(args)
+    const handleMessage = (_event:any, args:any) => console.log(args)
 
     // add a listener to 'message' channel
-    global.ipcRenderer.addListener('message', handleMessage)
+    global.ipcRenderer.addListener('filename', handleMessage)
 
     return () => {
-      global.ipcRenderer.removeListener('message', handleMessage)
+      global.ipcRenderer.removeListener('filename', handleMessage)
     }
   }, [])
 
-  const onSayHiClick = () => {
-    global.ipcRenderer.send('message', 'hi from next')
+  const filePick = () => {
+    global.ipcRenderer.send('file')
   }
 
   return (
     <Layout title="Home | Next.js + TypeScript + Electron Example">
       <h1>Hello Next.js 👋</h1>
-      <button onClick={onSayHiClick}>Say hi to electron</button>
+      <button onClick={filePick}>Choose File</button>
       <p>
         <Link href="/about">
           <a>About</a>