How to show and focus a file (or folder) in the file explorer of the OS with Electron Framework

Instead of force your user to navigate manually to a file, you may want to open it and focus it in the file browser automatically. Believe me, your user will be grateful.

To open and focus a file or browser in the file explorer of your computer, we are going to get access to the shell module of electron.

The shell module provides functions related to desktop integration, to get access to the shell module use a simple require :

const {shell} = require('electron');

Note: on older versions of electron, you need to access the shell module using remote.

var remote = require('electron').remote;
var shell = remote.shell;

Show in the file manager

As said before, the shell module provides a couple of useful methods, in this case we are going to use the showItemInFolder method to achieve our goal.

// Show a folder in the file manager
shell.showItemInFolder('C:Users/sdkca');
// Or a file
shell.showItemInFolder('C:Users/sdkca/myfile.txt');

The folder (or the file) will be automatically selected if possible in the file manager as shown in the following image :

Desktop folder

This could interest you

Become a more social person