Show Open Dialog in Electron

https://github.com/electron/electron
The source code for this project can be found
my github profile link

What I will learn?

• You will learn Open Dialog
• You will learn how to use the dialog module
• You will learn how to read the data in the file using the file system
• You will learn how to send the file using IPC modules

Requirements

• Atom Editor:https://atom.io/
• Electron: https://electronjs.org/
• Npm: https://www.npmjs.com

Difficulty

• Intermediate

Description

It’s very important that any application is user friendly
Although electron is a desktop application, it is encoded using html which allows us to create a user friendly application but some parts of javascript may not be user friendly for example alert calls.
As a result we can not create dialog boxes using alert calls
Provides a good interface to fulfill the task of creating electron communication boxes
Let us have aa look at it
Offers a Communication module that we can use to display local dialog boxes to open and save electron files
Develop a sample application for better conceptualization
When I open the application I select a text file and print the data in this text file with index.html
We will take advantage of the file system IPC modules and dialog modüle to create this example
Place a button on the index.html page

<button onclick="clickButton()">Open File</button>

When this button is clicked open dialog will be opened
Since the dialog modules work in the main process we need to send the information that was clicked to the main process
Define the ipcRenderer modüle so the ipcRenderer will do the sending to the main process

<script>
const {ipcRenderer}=require('electron')

Let define a function

function clickButton(){
ipcRenderer.send('click-button','true')
}

The message we send as true will inform you that the main process button click action is true
We should catch this message in the main process and open dialog window
First wedefine the ipcMain module

const {ipcMain}=require('electron')

I need to send the message that the dialog window opened to the client, so let’s create a method that receives the message

ipcMain.on('openFile',(event,arg)=>{

I can now define the file system and dialog modules

const {dialog}=require('electron') 
const fs=require('fs')

We can catch the button clicked message and open the dialog window

ipcMain.onrclick-button',(event,arg)=>{
if(arg=='true'){
dialog.showOpenDialog(function(fileNames){

We open the window with show Open Dialog method
We can capture the selected file in the window with the function written in it
fileNames is an array that contains all the selected
let’s check that the file is selected

if(fileNames==undefined){
console.log("No file selected");
}
else {
readFile(fileNames[0])
}

Also read the file with a method
I sent the first element in the method
Now create a method to read the file this method will also send the data to the client in the file

function readFile(filepath){

We can read the file using the file system

fs.readFile(filepath,'utf-8',(err,data)=>{

Err stand for error, data represents the data in the file
Let’s check the error

if(err){
alert("An error :"+err.message) 
return
}

Send this data to the client

event.sender.send('fileData',data)

So we sent the data to the index.html page, now we get this data

ipcRenderer.sendropenFiler,()=>{
})
ipcRenderer.oncfileData',(event,data)=>{
document.write(data)
})
</script>

The button is waitng for us to open the dialog window when the application is opened
When we click on button Windows opens
İf you cancel the operation without selecting any file, no file selected message appears
İf you select a text file the text inside the file is printed on my client page
I showed you how to open the dialog window on this tutorial
electron logo source link

Main.js

const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
const {ipcMain}=require('electron')

let win

function createWindow() {
   win = new BrowserWindow({width: 800, height: 600})
   win.loadURL(url.format ({
      pathname: path.join(__dirname, 'index.html'),
      protocol: 'file:',
      slashes: true
   }))
}

ipcMain.on('openFile',(event,arg)=>{
  const {dialog}=require('electron')
  const fs=require('fs')

  ipcMain.on('click-button',(event,arg)=>{
    if(arg=='true'){
      dialog.showOpenDialog(function(fileNames){
        if(fileNames==undefined){
          console.log("No file selected");
        }
        else {
          readFile(fileNames[0])
        }
      })
    }
  })

function readFile(filepath){
  fs.readFile(filepath,'utf-8',(err,data)=>{
    if(err){
      alert("An error :"+err.message)
      return
    }
    event.sender.send('fileData',data)
  })
}

})



app.on('ready', createWindow)

Index.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "UTF-8">
      <title></title>
   </head>

<script>
const {ipcRenderer}=require('electron')
function clickButton(){
  ipcRenderer.send('click-button','true')
}
ipcRenderer.send('openFile',()=>{
})
ipcRenderer.on('fileData',(event,data)=>{
  document.write(data)
})
</script>


   <body>
    <button onclick="clickButton()">Open File</button>
   </body>
</html>

Package.json

{
  "name": "showDialog",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Video Tutorial

Curriculum

IPC in Electron
The Remaining Character Calculation Application in the electron