The Electron library is easy to use for native desktop applications with the knowledge of web technologies. If you’re new to Electron and need an introduction, check out this article.

In this article, we are going to create a native file explorer with the ability to view multiple folders or files at once. We will be using TypeScript on top of the Electron library.

Getting Started

We can start with a template project from this github repository.Just clone the project and run the following commands: 

npm install 
 npm start 

This will start our application and display a browser window that displays the version of Node and Electron that we have running.

Now, we will add a button to open the native folder dialog and an input button to show the selected folders and files (index.html).

 
 

In renderer.ts, we have a button handler to send the channel using ipcRenderer.

  

You may also like:
What Is Electron and Why Should We Use it?

In main.ts, the showfolderdialog channel listened and then opened the dialog. The dialog will be provided by Electron,  which has properties like openfile and opendirectory with multi-selections. 

Then, when the promise executes, we get the selected file paths, which map the file path to read directory and gets all the files inside the directory. This, we again send to the reduce function to get the statistics of the of files. It will send the files with statistics sent through the channel, filelist.

The reduce function is to combine all the files of different folders to make one single list.

We also send the file paths separately by sending the selectedfolders to display the folders path in the input box.
 

    

In renderer.ts,  selectedfolders is used to create an event listener to get all the file paths and then concatenate them with the pipe symbol and place it in the value.

 
 

To list all the files, we can have an ul element and template element that can be expanded for each file display.

 
 

In renderer.ts, it will listen on the  filelist element, which receives the parameters (filename, stats) and fill all the template span elements. Then, the template is cloned and added to the ul element.

 
 

The desktop app will finally look like this. The full source code is available on github for reference

 

 

Further Reading



Source link

Write A Comment