How to Upload File in ElectronJS

In this lesson i want to show you How to Upload File in ElectronJS, ElectronJS is framework that allows developers to build cross platform desktop applications using web technologies such as JavaScript, HTML and CSS. it is built on top of Chromium, the open source version of Google Chrome and Node.js which provides runtime environment for JavaScript.

with ElectronJS developers can use the same codebase to create applications for Windows, Mac and Linux. this eliminates the need to write separate code for different platforms and making development faster and more efficient.

One of the main benefits of ElectronJS is that it allows developers to leverage their existing web development skills to create desktop applications. Developers can use popular web frameworks such as React, Angular or Vue.js to build user interface and Node.js to handle the backend logic.

First of all Navigate to an Empty Directory to setup the project and run the following command, this command generate the package.json file.

npm init

npm init

Install Electron using npm if it is not installed.

npm install electron

1	npm install electron

This is an example of how to use dialog module in Electron to open file dialog and read contents of the selected file, this is index.js file

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

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

app.on('ready', createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

const { ipcMain } = require('electron')

ipcMain.on('open-file-dialog', (event) => {
  dialog.showOpenDialog({
    properties: ['openFile'],
    filters: [{ name: 'Text', extensions: ['txt', 'js'] }]
  }, (files) => {
    if (files) {
      event.sender.send('selected-file', files)
    }
  })
})

const { app, BrowserWindow, dialog } = require('electron')

const path = require('path')

const url = require('url')

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

}))

}

app.on('ready', createWindow)

app.on('window-all-closed', () => {

if (process.platform !== 'darwin') {

app.quit()

}

})

app.on('activate', () => {

if (win === null) {

createWindow()

}

})

const { ipcMain } = require('electron')

ipcMain.on('open-file-dialog', (event) => {

dialog.showOpenDialog({

properties: ['openFile'],

filters: [{ name: 'Text', extensions: ['txt', 'js'] }]

}, (files) => {

if (files) {

event.sender.send('selected-file', files)

}

})

This is the main process code. you can call open-file-dialog event from the renderer process (your index.html file) using ipcRenderer module like so:

<input type="file" id="file-input" style="display: none;"/>
<button id="open-file-button" onclick="openFile()">Open File</button>

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

  function openFile() {
    ipcRenderer.send('open-file-dialog')
  }

  ipcRenderer.on('selected-file', (event, path) => {
    document.getElementById('file-path').innerHTML = `You selected: ${path}`
  })
</script>

const { ipcRenderer } = require('electron')

function openFile() {

ipcRenderer.send('open-file-dialog')

}

ipcRenderer.on('selected-file', (event, path) => {

document.getElementById('file-path').innerHTML = `You selected: ${path}`

})

</script>

This code will create button, when that is clicked, it will open file dialog for the user to select file. the selected file’s path will be displayed on the page.

And this is index.html file

<!DOCTYPE html>
<html>
  <head>
    <title>File Upload Example</title>
  </head>
  <body>
    <input type="file" id="file-input" />
    <button onclick="uploadFile()">Upload</button>
    <script>
      function uploadFile() {
        const input = document.getElementById("file-input");
        const file = input.files[0];
        // handle the file here, for example:
        console.log(file.name);
      }
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>File Upload Example</title>

</head>

<body>

<button onclick="uploadFile()">Upload</button>

function uploadFile() {

const input = document.getElementById("file-input");

const file = input.files[0];

// handle the file here, for example:

console.log(file.name);

}

</script>

</body>

</html>

This code creates file input element and button. when the button is clicked, uploadFile function is called, which gets the first file from the input element, and logs the file’s name to the console.

you can then use fs module in Electron to read the file and perform any other operations you need.

Please note that this is a basic example and in a real-world scenario you would need to handle errors, validation, and other concerns.