Electron Fundamentals, v2 Electron Fundamentals, v2

Customization of the Native File System Dialog

Check out a free preview of the full Electron Fundamentals, v2 course:
The "Customization of the Native File System Dialog" 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 several customizations of the native file system dialog, then adds an event listener to show an alert after the file is opened.

Get Unlimited Access Now

Transcript from the "Customization of the Native File System Dialog" Lesson

[00:00:00]
>> Steve Kinney: All right, so we can open files. We can read the files from the file system. There's a few other things that we can do here. These are all kinda silly. I don't personally use them all that often but you can do button label, which will be instead of the word Open, it'll be something else.

[00:00:19] Does anyone have strong opinions on what we should name our Open button?
>> Speaker 2: Unveil.
>> Steve Kinney: Unveil? I will just let you know in my notes. It's just wow, wow, wow, wow, so this is better. So do unveil, and this one, if you're on a Mac, you will never see, which is the title.

[00:00:43] But if you're on Windows, you will see this. Just, it's that for native file dialogues, modern versions of MAC don't have a tunnel bar at all. But if you're on Windows or Linux, you will see this title in there as well. All right, let's go ahead and fire that up.

[00:01:00]
>> Steve Kinney: And now you can see that when I select a file, I can unveil it in my application. All right, so you got some customization here. Again, if you were Window or Linux, there would be a title bar up here that would show you the open firewall document thing, right?

[00:01:18] MAC OS users will just have to trust me. Do any of the Windows or LInux can we verify we see something there? All right, cool. All right, so that's neat. We can do stuff and console.log it to the terminal. Generally speaking, the users or application are not going to have the terminal open, right?

[00:01:38] So having this cool user interface here where we ask them for a file and then show them nothing, I mean there was that one, it was Yo App, right? So I guess you could make money off of this. I don't wanna tell what you can do with your life.

[00:01:51] In Renderer, let's go ahead and start to wire up the code. And so we could say something along the lines of openFileButton. We'll addEventListener. We'll say, hey, when they click that button or they clock it, if they click it.
>> Steve Kinney: We'll also start with an alert,
>> Steve Kinney: You clicked the open file button!

[00:02:26] Cool, the other thing we're gonna do is we're gonna get rid of this function right now.
>> Steve Kinney: And we'll go ahead and we'll start this up.
>> Steve Kinney: We hit open file, we've clicked the open file button.