rudifa · October 27, 2022 18:32 · Oct 27, 2022 · Oct 27, 2022 · Oct 27, 2022 · Oct 27, 2022
diff --git a/Electron → Electron IPC Pattern #2 b/Electron → Electron IPC Pattern #2
diff --git a/Electron b/Electron
@@ -0,0 +1,18 @@
+// 1. Renderer defines a listener that will, on the user click,
+//    call asynchronously window.electronAPI.openFile(),
+//    which is defined by preload.
+//    Function openFile returns the data 
+//    (the file path selected by the user) that the handler in main
+//    obtained from the OS dialog.
+//    The listener updates the html text with this data.
+
+// 2. Preload defines function openFile that calls invoke(<channel>)
+//    which will be handled by the main
+
+// 3. Main defines a function to hanndle the fileOpen request
+//    by launching the OS File Open dialog,
+//    and attaches it (below) to handle the request comming in 
+//    (from renderer)
+//    on success, the function returns the filepath selected by the user
+
+// 3a. handleFileOpen is attached here to handle the request on the channel
diff --git a/main.js b/main.js
@@ -1,6 +1,11 @@
 const {app, BrowserWindow, ipcMain, dialog} = require('electron')
 const path = require('path')
 
+// 3. Main defines a function to hanndle the fileOpen request
+//    by launching the OS File Open dialog,
+//    and attaches it (below) to handle the request comming in 
+//    (from renderer)
+//    on success, the function returns the filepath selected by the user
 async function handleFileOpen() {
   const { canceled, filePaths } = await dialog.showOpenDialog()
   if (canceled) {
@@ -20,6 +25,7 @@ function createWindow () {
 }
 
 app.whenReady().then(() => {
+  // 3a. handleFileOpen is attached here to handle the request on the channel
   ipcMain.handle('dialog:openFile', handleFileOpen)
   createWindow()
   app.on('activate', function () {

diff --git a/preload.js b/preload.js
@@ -1,5 +1,8 @@
 const { contextBridge, ipcRenderer } = require('electron')
 
+// 2. Preload defines function openFile that calls invoke(<channel>)
+//    which will be handled by the main
+
 contextBridge.exposeInMainWorld('electronAPI',{
   openFile: () => ipcRenderer.invoke('dialog:openFile')
 })
diff --git a/renderer.js b/renderer.js
@@ -1,3 +1,11 @@
+// 1. Renderer defines a listener that will, on the user click,
+//    call asynchronously window.electronAPI.openFile(),
+//    which is defined by preload.
+//    Function openFile returns the data 
+//    (the file path selected by the user) that the handler in main
+//    obtained from the OS dialog.
+//    The listener updates the html text with this data.
+
 const btn = document.getElementById('btn')
 const filePathElement = document.getElementById('filePath')
 

diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
+    <title>Dialog</title>
+  </head>
+  <body>
+    <button type="button" id="btn">Open a File</button>
+    File path: <strong id="filePath"></strong>
+    <script src='./renderer.js'></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,32 @@
+const {app, BrowserWindow, ipcMain, dialog} = require('electron')
+const path = require('path')
+
+async function handleFileOpen() {
+  const { canceled, filePaths } = await dialog.showOpenDialog()
+  if (canceled) {
+    return
+  } else {
+    return filePaths[0]
+  }
+}
+
+function createWindow () {
+  const mainWindow = new BrowserWindow({
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }
+  })
+  mainWindow.loadFile('index.html')
+}
+
+app.whenReady().then(() => {
+  ipcMain.handle('dialog:openFile', handleFileOpen)
+  createWindow()
+  app.on('activate', function () {
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+})
+
+app.on('window-all-closed', function () {
+  if (process.platform !== 'darwin') app.quit()
+})
diff --git a/package.json b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "real-chairs-curve-0p1c0",
+  "productName": "real-chairs-curve-0p1c0",
+  "description": "My Electron application description",
+  "keywords": [],
+  "main": "./main.js",
+  "version": "1.0.0",
+  "author": "rudifarkas",
+  "scripts": {
+    "start": "electron ."
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "electron": "21.2.0"
+  }
+}
diff --git a/preload.js b/preload.js
@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron')
+
+contextBridge.exposeInMainWorld('electronAPI',{
+  openFile: () => ipcRenderer.invoke('dialog:openFile')
+})
diff --git a/renderer.js b/renderer.js
@@ -0,0 +1,7 @@
+const btn = document.getElementById('btn')
+const filePathElement = document.getElementById('filePath')
+
+btn.addEventListener('click', async () => {
+  const filePath = await window.electronAPI.openFile()
+  filePathElement.innerText = filePath
+})
diff --git a/styles.css b/styles.css
@@ -0,0 +1,3 @@
+/* styles.css */
+
+/* Add styles here to customize the appearance of your app */
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		/* styles.css */

		/* Add styles here to customize the appearance of your app */
No results found