We’ll create user interface (UI) for our “Duplicate File Finder” desktop app with HTML and style it witch css. It is a very simple interface, just a log on top with Application name, version number and two button Add folder and Start search for controlling the app behavior. The “Add folder” button will browse the file system and “Start search” will trigger the app to initiate the scanning of added folder recursively.

The Duplicate File Finder preview:
This app let you to add multiple folders in the list for scanning.

Once a folder has been added in the list, you can remove it and change its mode to excluded or included. The each folder row divided into three columns:

Cross icon: Allow you to remove the folder from the list

Mode: Let you to choose included or excluded

included mode: Will scan the folder and its sub-folders (recursively). It is the default mode when you add a folder.

excluded mode: Will not scan the folder

Location: The complete path of folder.

To start developing our Duplicate File Finder app, open the main.js file and remove the default top menu bar as described below:

Remove menu bar from Electron.js app

When we build our app, the default menu won’t be there anymore, but if you wish to remove it during the development, open main.js and add mainWndow.setMenu(null)line :

The directory picker

Can we get the full directory path from input type=”file”

<input type="file"> let the user choose one or more files from their device storage. To choose a directory or folder we can use webkitdirectory:

<input type="file" webkitdirectory multiple>

For security reasons browsers do not allow JavaScript to access the the File System. If we try to fetch the directory path using above code, we’ll receive the “directory name” but not the full path. To resolve this issue Electron.js provides the dialog api. https://electronjs.org/docs/api/dialog.

Electron Dialog

The Dialog is opened from Electron’s main thread (main.js file). To use dialog object from the renderer process (index.html) we need to use remote:

const {dialog} = require('electron').remote

OR

const dialog = require('electron').remote.dialog

The following code let you choose multiple directories and give their full paths in a callback function:

Summary

We edited the main.js file and removed the default menu bar by calling the setMenu(null) method. We discussed how we can get the full path of a file or folder by using the Electron’s dialog api. At the end, we re-created the index.html and beautify it with css using style.css.

The next page will cover: how to interact with users and respond to their actions by creating the renderer.js file.