This course is out of date and does not reflect our standards or industry best practices.

Check out a free preview of the full Electron Fundamentals, v2 course:
The "Show File in File Explorer" Lesson is part of the full, Electron Fundamentals, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates how to create the functionality of showing a file in the folder.

Get Unlimited Access Now

Transcript from the "Show File in File Explorer" Lesson

>> Steve Kinney: We have just a little bit more to ingratiate ourself with our current operating system here. And again, this really goes to show just basically how deep Electron can get its tendrils into the OS. Which is show file, which'll show that file in the file system, and then also open in default application.

[00:00:21] Which'll ask the operating system, hey, markdown files, those are used to open these, right? And then trigger the operating system to open that application and open the file in that application. And so we do need one more module for this one. And that is the shell module, which is not necessarily for a terminal shell, or anything like that.

[00:00:47] It's basically for these kind of, I would call them miscellaneous operating system things, right? It's kinda like the junk drawer, that's mean to whoever made this decision, so let's go with it. It's kinda like the junk drawer of other different ways of interacting with the operating system that don't necessarily necessitate their own module.

[00:01:07] Like the dialog, or like the stuff we were doing with the window, and stuff along those lines. It's got a bunch of kind of like little methods like hey, right now we do have a little bit of a problem here.
>> Steve Kinney: That's probably not what my application should do, right [LAUGH]?

>> Steve Kinney: Cuz it's like, I'm a web browser, this all works, right? And so we clicked a link, it opened it in that browser window, which is not what I would expect from my application, right? We would probably expect it to open it up in the main browser, not do this.

[00:01:56] Cuz now I have to, [LAUGH] I don't even have a back button, this is the worst browser ever. And now I'm stuck looking at a pic, my, it's like Inception. Let's close this, I'm done with this [LAUGH]. So shell allows us to basically intercept those things, be like hey, that link, I know you clicked a link, very cool.

[00:02:13] Maybe a browser? Maybe open that link up in Chrome? We're going to do it for files on the file system, showing it in Finder, or Windows Explorer, or whatever Ubuntu uses [LAUGH].
>> Speaker 2: Nautilus.
>> Steve Kinney: Nautilus, right, I knew that at one point. And we'll open it up there, and we'll open up in the default application.

[00:02:37] The shell is one of those modules that's available in both the renderer as well as the main process. So it's one of those few that's available both places. For us right now, we mostly care about using it in the renderer process at this point. All right, so first of all, those buttons right now are always disabled.

[00:02:58] So, we do need to enable them if there is a current file. So unless it is a brand new window with an unsaved file, then we want to go ahead and turn those buttons on. So if we're got a file path, we can basically say, showFileButton.disabled.
>> Steve Kinney: Very similar to what we did for the isEdited, right?

[00:03:25] And the openInDefault button, cool. So we get both of those in place, those will now turn on if I go ahead and start this up.
>> Steve Kinney: They're disabled, I can open a file.
>> Steve Kinney: Now they're enabled. They don't do anything yet, cuz I didn't put any event listeners on them, but they are, in fact, enabled.

[00:03:50] So step two, as you can probably guess, would be to go ahead and actually have them do a thing. So, we can actually put that in place as well, let's put it next to the other buttons. So we could say, showFileButton-addEventListener('click').
>> Steve Kinney: And we'll say hey, we'll just check one more time, if there really is a file path, right?

[00:04:22] Cuz it's disabled if there's not, but let's, users are wiley. So if there's no file path at all, we'll just show an alert.
>> Steve Kinney: And if so, we can pull in the shell module, so we'll add that here.
>> Steve Kinney: Scrolled down too far.
>> Steve Kinney: We'll say shell.
>> Steve Kinney: OpenItem.

[00:05:06] Here are some of the other ones you can do. MoveItemToTrash, openItem, openExternal, readShortcutLink, writeShortcutLink, so it's mostly for Windows and stuff along those lines. Can do a bunch of interesting ones in this case. These are the ones we kind of care about the most. Let's go with showItemInFolder.

[00:05:27] Give you a hint. The next exercise we're gonna do? I might have spoiled it [LAUGH], so I don't know.
>> Steve Kinney: All right, so we'll go ahead and save that, we'll refresh, open a file up
>> Steve Kinney: And now we can see it, it triggers Finder, or Windows Explorer, or Nautilus as I just learned, it'll open the right