Skip to content

Instantly share code, notes, and snippets.

@vhashimotoo

vhashimotoo/index.html Secret

Last active December 28, 2021 19:31
Show Gist options
  • Save vhashimotoo/54ec35cb051ae81fa667c0ba945edcba to your computer and use it in GitHub Desktop.
Save vhashimotoo/54ec35cb051ae81fa667c0ba945edcba to your computer and use it in GitHub Desktop.
Download ZIP
Dialog Invoke Example
Raw
index.html
<!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>
Raw
main.js
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()
})
Raw
preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('dialog', {
showDialog: async () => await ipcRenderer.invoke('dialog:open')
})
Raw
renderer.js
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