Check out a free preview of the full Electron Fundamentals, v2 course:
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 live codes a way to grab a file from a user using their native system dialog.

Get Unlimited Access Now

Transcript from the "Native File System Dialog" Lesson

[00:00:00]
>> Steve Kinney: If we know that we can access the file system, it would be really great if we could actually go ahead and read a file, right? But what file do we read? Well, in Node land, we just use const fs = require fs. And either you take it as a command line argument, or you know which file you're reading, so on and so forth.

[00:00:18] In this case we're creating user interfaces, which means that we need to go ahead and ask the user what file they want to open. Now, this could be tricky, right? Do you want to create your own bespoke user interface? Like, all right, what I'm going to do is I'm going to start in the current directory and I'm going to do like the fs.redir.

[00:00:38] And then I'm going to create this entire react application. Where they're going to pick a file and it's going to look all weird and brand new. Because have you ever opened up one of those Java applications from the early 2000s? And everything looks like slightly off and weird, right?

[00:00:51] We don't want to do that, right? It won't look like a Windows app, it won't look like a Mac app, so on and so forth. So what we'll end up doing is, we'll actually use the native file system dialogs, right? And so in Windows, the Windows user will get a Windows file picker, right?

[00:01:07] On Mac OS, they'll get Mac OS file picker, on Linux, they'll get a Linux file picker, right? Whatever, whether it's Gnome or KD or whatever, they'll get that in place. So we don't have to do that ourselves because that it is kind of built in for us in Electron.

[00:01:24] Anyone want to take a lucky guess what module we use for a file dialog?
>> Speaker 2: File dialog?
>> Steve Kinney: Close, dialog, [LAUGH].
>> Steve Kinney: Cool, so we have dialog and dialog will go ahead, and there's a bunch of methods on it. I'm going to create a function then we're going to move it around and use it different places.

[00:01:47] Because we don't know, I talked about it earlier, which is operating system stuff. The dialog module is only available in the main process, right? And so that might be tricky, like but I have a button in my user interface, I'm going to need to talk to the main process.

[00:02:02] We'll deal with that in a second, right now we're just going to call the function, and then we'll figure out how to wire it up correctly. So I'm going to make this function because I'm going to move it around multiple places. I'm going to call it const, maybe not in all caps.

[00:02:14]
>> Steve Kinney: const getFileFromUser, right? This is arbitrary function name, you can call this any way you want, you want to write ES5 function keywords, whatever, it's fine. This is just a JavaScript function.
>> Steve Kinney: Cool, and what we'll do now is we can say.
>> Steve Kinney: Dialog, let's hit dot, and there is a bunch of stuff in here, the ones that I'm kind of most interested in are these show methods.

[00:02:47] So showErrorBox, showMessageBox, showOpenDialog, that one seems useful for what I want to do. So I'll say dialog.showOpenDialog, and we've got, this takes a few different arguments. It can take a first argument, which is a browser window object. Which we'll talk about in a second, we're going to ignore that one for a second.

[00:03:13] It takes effectively an object full of options, and what we can do is give it some properties and properties is an array. And these are the kind of, what kind of native file dialog do you want? And you might be like, I want one where I can pick files, cool, which is different than one for saving files, so on and so forth.

[00:03:37] But depending on your application, should they be able to select multiple files? Do we show hidden files? So on and so forth, so there's a bunch of options in here. We can look at the docs in a second, but the one that we know we want is openFile, right?

[00:03:54] Which will allow us to basically select a file in this case, and so this method returns stuff. And it'll either return one of two things, it'll return undefined if the, undefined or null, we'll find out together in a second. Undefined or null if the user hits cancel, or it will turn an array of file names based on the user's selection, you're like, why an array?

[00:04:27] Because I said earlier, they can do multi select, so it could be several files that they picked, and so on and so forth, right? So in that case it is an array, that way you don't have to be like, array.is array, if they picked multiple files versus a single file.

[00:04:42] It will either be undefined or an array, cool, so we'll say const files and that will be the whatever the result of that was. And for now, we're just going to console.log files, right? Let's just see what it gives us, let's not take my word for anything, I'm untrustworthy.

[00:05:04] So, any time you change the main process, you have to quit the application. We also want to call this function, eventually we want to wire it up to the button. We are not there yet, so what we'll do is, whenever the application is ready, we will do this getFileFromUser function.

[00:05:25] So as soon as the application starts up, it's going to create a browser window. And right after that, it's going to go ahead and give me this native file dialog.
>> Steve Kinney: Bounce in, there it is, cool, so I can pick either one of these two files from my desktop, let's go with Grocery List.

[00:05:50] The other one is none of your business.
>> Steve Kinney: There it is in the array, I'm running an old version of Mac OS because as much as I thought about upgrading Mac OS yesterday. The day before I did a six hour workshop, I resisted that urge, so you may or may not see this, but it's fine.

[00:06:10] It's just yelling at me about objective c frameworks, it's okay. More importantly is we've got this array down here, which is the file that I selected, cool, so there it is, and I picked it. Now I can do all sorts of stuff with this, now let's just try it one more time where I cancel it.

[00:06:35]
>> Steve Kinney: And I'll go ahead and I will hit Cancel, and I get undefined. So we're going to have to be a little bit defensive, if they hit Cancel, it's not going to be in array. So if you go in there and you try to grab the first thing out of the array, and it's undefined, guess what's going to happen?

[00:06:48] Your app's going to blow up, that's not good, so we have to be slightly defensive about that. And what we'll do in this case is we'll say, if there's no such thing as files, like if files is false.
>> Steve Kinney: Just return out early, don't do anything else. Like they cancelled, we don't need to do anything else here, cancel this, let's move on, it's fine.