Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Dialog Invoke Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dialog Example</title>
</head>
<body>
<h1>Dialog Example</h1>
<button id="execute-dialog">Click to show dialog</button>
<p id="filePath" />
<script src="./renderer.js"></script>
</body>
</html>
const { app, BrowserWindow, ipcMain, dialog } = require('electron')
const path = require('path')
app.whenReady().then(() => {
const mainWindow = new BrowserWindow({
width: 1280,
height: 720,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')
}
})
ipcMain.handle('dialog:open', async (_, args) => {
const result = await dialog.showOpenDialog({ properties: ['openFile'] })
return result
})
mainWindow.loadFile('index.html')
mainWindow.toggleDevTools()
})
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('dialog', {
showDialog: async () => await ipcRenderer.invoke('dialog:open')
})
document.getElementById('execute-dialog').addEventListener('click', async () => {
const result = await window.dialog.showDialog()
// Do something with the result
console.log(result)
document.getElementById('filePath').innerText = `Selected file: ${result.filePaths[0]}`
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment