Ask for a variable defined in renderer from preload - node.js

Question

With:
contextIsolation = true
nodeIntegration = false
What is the best way to ask for the value of a variable defined in the renderer context from preload context?
I'm developing an application for managing photo collections.
In my main.js there is a menuItem to import photos, the click function for this menu entry is:
click() {
dialog.showOpenDialog(mainWindow, {
title: 'Import',
properties: ['openFile', 'multiSelections']
}).then(result => {
if (result.filePaths.length) {
mainWindow.webContents.send('import', result.filePaths);
}
});
}
in preload.js:
ipcRenderer.on('import', (ev, origins) => {
origins.forEach(origin => {
files.importPhoto(origin, dir);
});
});
the 'dir' attribute in preload function is the destination folder to copy the photos and is the value I need to get from the app.js in the renderer.

Answer 1

If you want to be able to modify dir in your preload.js file, you should expose your ipcRenderer.on code as a function through the contextBridge. Ie.
preload.js
const { contextBridge, ipcRenderer } = require("electron")
contextBridge.exposeInMainWorld("api",
{
importFunc: function(dir) {
// clear out any existing listeners if this method
// is called multiple times from the app.js/renderer code
ipcRenderer.removeAllListeners("import");
ipcRenderer.on("import", (ev, origins) => {
origins.forEach(origin => {
files.importPhoto(origin, dir);
});
});
}
}
)
In your app.js/renderer code, you could call this function like so when you have the right value for dir. (Once this method is run, your MenuItem click should pull in the right value).
window.api.importFunc("C:\\myfolder");