whoisryosuke/index.html

## 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>

## 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()
})

## preload.js
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('dialog', {
  showDialog: async () => await ipcRenderer.invoke('dialog:open')
})

## 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]}`
})

## styles.css
/* Empty */
	<!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]}`
	})