I am trying to upload a file in an electron app which works perfectly for electron v9.3.0 but as soon as I use electron v10.1.1, it gives the following error
Uncaught TypeError: Cannot read property 'dialog' of undefined at this line const dialog = electron.remote.dialog; see the screenshot below.
main.js内容如下
const { app, BrowserWindow } = require('electron')
function createWindow () {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// Load the index.html of the app.
win.loadFile('src/index.html')
// Open the DevTools.
win.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
// This method is equivalent to 'app.on('ready', function())'
app.whenReady().then(createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// To stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the
// app when the dock icon is clicked and there are no
// other windows open.
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
// In this file, you can include the rest of your
// app's specific main process code. You can also
// put them in separate files and require them here.
index.js的内容如下
const electron = require('electron');
const path = require('path');
// Importing dialog module using remote
const dialog = electron.remote.dialog;
var uploadFile = document.getElementById('upload');
// Defining a Global file path Variable to store
// user-selected file
global.filepath = undefined;
uploadFile.addEventListener('click', () => {
// If the platform is 'win32' or 'Linux'
if (process.platform !== 'darwin') {
// Resolves to a Promise<Object>
dialog.showOpenDialog({
title: 'Select the File to be uploaded',
defaultPath: path.join(__dirname, '../assets/'),
buttonLabel: 'Upload',
// Restricting the user to only Text Files.
filters: [
{
name: 'Text Files',
extensions: ['txt', 'docx']
}, ],
// Specifying the File Selector Property
properties: ['openFile']
}).then(file => {
// Stating whether dialog operation was
// cancelled or not.
console.log(file.canceled);
if (!file.canceled) {
// Updating the GLOBAL filepath variable
// to user-selected file.
global.filepath = file.filePaths[0].toString();
console.log(global.filepath);
}
}).catch(err => {
console.log(err)
});
}
else {
// If the platform is 'darwin' (macOS)
dialog.showOpenDialog({
title: 'Select the File to be uploaded',
defaultPath: path.join(__dirname, '../assets/'),
buttonLabel: 'Upload',
filters: [
{
name: 'Text Files',
extensions: ['txt', 'docx']
}, ],
// Specifying the File Selector and Directory
// Selector Property In macOS
properties: ['openFile', 'openDirectory']
}).then(file => {
console.log(file.canceled);
if (!file.canceled) {
global.filepath = file.filePaths[0].toString();
console.log(global.filepath);
}
}).catch(err => {
console.log(err)
});
}
});
index.html的内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial
/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1> We are using node
<script>
document.write(process.versions.node)
</script>, Chrome
<script>
document.write(process.versions.chrome)
</script>, and Electron
<script>
document.write(process.versions.electron)
</script>.
<h3>File Upload in Electron</h3>
<button id="upload">Upload File</button>
<!-- Adding Individual Renderer Process JS File -->
<script src="index.js"></script>
</body>
</html>
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
enableRemoteModule: true,
nodeIntegration: true
}
})
为了访问remote渲染器进程上的模块。我们需要启用enableRemoteModule as true因为这是默认的false从较新的版本。