Electron Fundamentals, v2

Electron Fundamentals, v2 Reading from the File System


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 "Reading from the File System" 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 read the file that was opened by the user.

Get Unlimited Access Now

Transcript from the "Reading from the File System" Lesson

>> Steve Kinney: However, if they do choose to read the file or if they do select a file, obviously just giving them back the file name, not great. This is a text editor, we should probably get the text contents of the file. So to do that we will need to go up here and say,

>> Steve Kinney: Const fs = require('fs'). And that will bring us in the file system module, where once we have the name of the file, we'll go ahead and we'll read the file and then we'll start by console logging it. Eventually, we'll figure out, we'll say, hey, renderer process, I open this file here are the contents for you to put it into the user interface.

[00:00:42] We'll get all the way there, but we will start with just reading the file and logging into the console. So if there are no files, we're gonna hit cancel. Otherwise, let's get the first file out of the array. If you wanna use the array destruction syntax you're more than welcome to.

[00:01:01] And then, so we've got the file name, and then we'll do,
>> Steve Kinney: Now, you could use the asynchronous method to read file that take a call back. I'm going to use read file sync, mostly just to keep it easy for us as we're learning electron. Generally speaking, read file sync blocks the main process until it reads the file.

[00:01:26] If it's a giant file that's probably not great, but we know that they're small files, so I'm not gonna make things more complicated with call backs personally right now. But we'll go ahead and we'll read file sync. And we'll do that with the file name, and that will actually, let's go ahead and do it like this real quick, and we'll see the quick problem here, he says.

>> Steve Kinney: Go ahead and pick that. You can see I get this buffer. Cuz node doesn't know if it's a text file, or an image file, or a binary file, or anything along those lines. So I can go ahead and just say,
>> Steve Kinney: toString. Which will actually make it a,

>> Steve Kinney: You can guess what it's gonna make it. It's gonna make it a string.
>> Steve Kinney: Cool, and there is the contents of my grocery list, red apples, green grapes, green apples, red grapes, vegan ham, steak, I don't know. All right, so now we can read and write from the file system.

[00:02:37] We can trigger that with a native OS level file dialogue, that's pretty cool. But it would be a little bit better if we could do a few more interesting things with it. First, before we do that, I do wanna talk about some of the options that you have in the file dialog.

[00:02:53] We saw the openFile one. I talked a little bit about multi-select, or the ability to select an entire directory is a thing that you can do. We don't want any of those for our application, cuz it's a single window application. They can't support a directory, so on and so forth, so we're gonna stick with that one.

[00:03:07] But there are some other things that you can do. Right now, we're calling that toString method. And I was like, yeah, we call toString because node doesn't know if it's an image or a binary. Neither do we, there is nothing stopping the user right now from going ahead and opening up a dank meme, right?

[00:03:24] And toString'ing that will be a bunch of binary garbage. So we need to figure out a way to filter out what the user can actually select. And the way we can do that is we can just say filters, and filters is an array of all the file types that you want to allow the user to open.

[00:03:43] So in this case we could say,
>> Steve Kinney: name:'Text Files', and we'll say extensions: ['txt', 'text']}, are there any other common extensions for text files? That feels good right?
>> Speaker 2: CSV.
>> Steve Kinney: Is that really a text file?
>> Speaker 2: MD.
>> Steve Kinney: You're reading my mind, you're reading my mind. We'll also say something along the lines of name cuz this is a markdown editor, right?

[00:04:16] So MD is a good thought. We'll say Markdown Files.
>> Steve Kinney: I'll say, md, mdown, markdown.
>> Steve Kinney: I'll make a new file extension named after Marc, called marcdown. It'd be good, cool. So this is text and then we're fine. And so this will allow the user, now if you're on Windows by default, you'll actually see a drop-down which will allow you to select which kind of files you wanna pick.

[00:04:56] Depending on your version of Mac OS, you can choose to see that, we'll talk about what that means in a second. Let's actually just get this up and running first. Unexpected token, cuz I didn't put a comma at the end.
>> Steve Kinney: Cool.
>> Steve Kinney: All right, so I can go ahead, I can see this File dialog.

[00:05:25] You can see these are normal, but if I go on to, let's say, my documents directory,
>> Steve Kinney: You can see that things that are not markdown files are grayed out and I can't choose them, right? The other thing is if you're in Windows you can see a drop down also depending on your version of MacOS there might be this option spot in here, where you can actually also see.

[00:05:49] And I named that markdown files and text files. You could name that whatever your custom application is, right? I could've named them fire sale documents, and that would've been what was displayed there. Windows, you get that by default. Mac, you might have an Options button there. Otherwise, MacOS will still respect it just by graying out things that are not valid in that list.