How to get Full Path of Uploaded Image in Electron Application

How to get Full Path of Uploaded Image in Electron Application

 

Welcome Folks I am back with another blog post. In this post we will see How to get the Full path of the File which has been uploaded in an Electron Application. First of all we will upload the File in Electron using the Dialog Module which is there in electron and then we will get the full path of the file and display it in the console.

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <title>Electron Button Click Listener</title>
    </head>
    <body>
        <button id="upload">Click Me</button>
    </body>
    <script src="renderer.js"></script>
</html>

 

 

So just create index.html file and write this simple code which contains a button with a id which we can target in the Javascript.

 

Just create the main process script file main.js and copy paste the code given below.

 

'use strict';

var app = require('electron').app;
var BrowserWindow = require('electron').BrowserWindow;
var mainWindow = null;
var ipc = require('electron').ipcMain;

ipc.on('close-main-window', function() {
    app.quit();
});

app.on('ready', function() {
    mainWindow = new BrowserWindow({
        resizable: true,
        height: 600,
        width: 800,
        webPreferences:{
          nodeIntegration:true
        }
    });

mainWindow.loadURL('file://' + __dirname + '/app/index.html');
    mainWindow.on('closed', function() {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null;
    });
});

 

READ  Node.js API Authentication With JWT

This is the boilerplate code of electron which is necessary for creation of a simple window in electron. And we are binding some events what happens when app closes then we should make main window to null all that simple stuff.

 

Now make a new file Renderer.js which will be renderer process and the script file for index.html and write these lines of code to actually target the button and whenever the button is clicked we will be sending the event or message as a payload to the main process informing so that it can take appropriate action in this case open the dialog for selecting the file for the user.

READ  Generate Custom Social Share Buttons With jQuery C Share Plugin

 

const ipc = require('electron').ipcRenderer;
const buttonCreated = document.getElementById('upload');

buttonCreated.addEventListener('click', function (event) {
    ipc.send('open-file-dialog-for-file')
});

 

Now the main process will receive this event from the render process and take appropriate action i.e open file upload dialog to the user so that user can upload the file. Just write these lines of code in the main.js script

 

var os = require('os');
var {dialog} = require('electron');

ipc.on('open-file-dialog-for-file', function (event) {
    if(os.platform() === 'linux' || os.platform() === 'win32'){
       dialog.showOpenDialog({
           properties: ['openFile']
       }, function (files) {
          if (files) event.sender.send('selected-file', files[0]);
       });
   } else {
       dialog.showOpenDialog({
           properties: ['openFile', 'openDirectory']
       }, function (files) {
           if (files) event.sender.send('selected-file', files[0]);
       });
   }});

In these lines of code first of all we are importing two important modules first is the os module which will actually check dynamically which operating system user is running and depending upon that it will appropriate dialog and secondly we are using the File Picker Native Dialog which is present inside the Electron and then we are using it to generate the dialog.But the job is not finished we need to give this information back to the renderer process so that it can print this information in the console or whatever area.For this we will again make use of ipc module and create a event and pass information to the renderer process. Now go back to renderer.js and write this single line of code to complete the application

READ  How to Upload Files to Google Drive using Google Drive API V3

 

ipc.on('selected-file', function (event, path) {
    console.log('Full path: ', path);
});

 

Congratulations we are done getting the Full Path of the Uploaded File in Electron Application. Thanks for reading this post and if you like reading this and wants to read more of this please subscribe the blog below to get all the notications.

 

Leave a Reply

Close Menu