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.






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.



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.



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


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



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