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.
We can start with a template project from this github repository.Just clone the project and run the following commands:
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
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
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,
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.
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
The desktop app will finally look like this. The full source code is available on github for reference.