Good old question on sending data from ipcMain to ipcRenderer

Hello community,

I am using a custom menu. I basically added a menu item named “Load” to the edit menu from this exemple.

I simply would like to take advantage of the integrated window menu to open and upload a JSON data file on the disk to get any data to display in a DIV after loading it through a menu item “Load”. Like any other desktop application that allow to load files from desktop and save files to desktop.

Taking advantage of the integrated window menu means I don’t want to create an HTML buttons to trigger an asynchronous message from ipcRenderer to ipcMain. In my opinion, that would seems confusing to get functions in a menu bar and functions on the webpage such as Save, Save As or Load.

I usually code in backend system and web development is pretty new (and complicated) to me. Also, I hope someone more experimented would have a good idea and solution to help me in achieving this.

Kind regards,
Clément

Hello,

After hundreds of tries, I finally could send content of a file open in ipcMain to an ipcRenderer.

I probably cumulated too many errors at the same time and was too confused to achieve it as it is actually pretty simple to do so… :sweat_smile:

In main process

  1. I declare a global variable let mainWindow = New BrowserWindow(…)

  2. I create a menu with custom menuItems and set application menu with it

  3. In the click function of the menuItem Open, I call function dialog.showOpenDialog(…)

  4. I read the content of the selected file and here is the trick… I call mainWindow.webContents.send(‘name-of-command’, loadedData)

  5. loadedData variable correspond to the data returned by the function which read the selected file

In renderer process

  1. I create the variable ipcRenderer and define an event handler ipcRenderer.on(‘name-of-command’, (…) => {…})

  2. In the callback function of the ipcRenderer event handler, do whatever you want with the data

I encounter different kind of errors due to my lack of knowledge of JS, Nodejs and Electron… The problem I had was that the devtools was reporting the error “Uncaught ReferenceError: require is not defined in renderer.js”. The solution to this problem was here and now transfer data from ipcMain to ipcRenderer is working fine :smiley:

Your comments are welcome.

I will later share a full code exemple via github.

Kind regards,
Clément

As promised, a simple exemple.

Any comments are welcome.

Clément