Import Cart Data Practice

[00:00:00]
>> Well then, to import is kind of the reverse operation, okay, so we need to use the other handle, the other way. The other, let's say, await window, is the showOpenFilePicker without metadata. The only difference is that here it returns an array. Why? Not pocker, picker. So, it returns an array, so I'm going to take the first one because I'm expecting only one file.

[00:00:31]
Because the user, if I said so, through properties, through options, the user can pick more than one file. Can be a multi-selection. But if I don't say anything, it's always one. Okay, so that's why I'm using this shortcut to actually get the first element, okay? So that's ES6.

[00:00:52]
From here, then I'm going to take a file from that handle. The handle is kind of a pointer to the dialogue, okay? And then, okay, give me the file. But if here, it doesn't feel like it has a meaning. Why do we have a file and a handle if it's just the same thing?

[00:01:14]
But remember that we have a directory as well. In a directory, it makes more sense to have a handle to the folder. And then I have files, okay, separate files that I have over that handle. The handle is where the permission lives, okay? So you need that handle every time you want to save on that folder.

[00:01:37]
You don't wannna get rid of that handle. If you do that, you will need a new permission, okay? Make sense? Well, so then here I need to try to read the file. So for example, I can create the text of the file. It's await file dot and here is where you can do array buffer, okay, text or you can do a stream or slice and so on.

[00:02:06]
And when you have the text, I could try to parse this as JSON, JSON.parse of that text, okay? And before actually doing something, well, anything can fail here, right? So maybe it's not a JSON, maybe the user has just picked a PNG file, you don't know, the user is picking a file.

[00:02:31]
So it's completely out of your control what's going on here. So maybe we must use a try catch cuz we are completely out of control. Like so we'll handle the error in a minute. And also, we should check what's in that JSON object. For example, I could check if it's an array, if it's in an array because maybe it's a JSON but completely different from my structure.

[00:03:09]
I can check also for example, if the length is greater than zero, and I could even check even if the scheme of the JSON matches what I'm expecting, I should do that. If everything is correct, then here, I could say, okay, well now I have that thing here.

[00:03:28]
If not, like here, I could make an alert, don't do alerts anymore but yeah. I have the power of being the trainer so I can do alert like the file is invalid or something like that. When something happens here like for error reading file real, okay, something like that.

[00:03:44]
Makes sense? So, I think everything looks good. So, I can refresh here, I can delete my cart, okay? I can try to add something like there, I can try to import another one from card.json. And of course it didn't work. Why? What do I need to do after changing my card?

[00:04:25]
>> You need to render.
>> We need to render. Re-render it. Also we could check also indexV if it's changed there, but anyway. So we go re-render, so after doing that, render, remember this is not reactive programming. So this is classic programming event based. So we need to call when we wanna change something, okay?

[00:04:58]
Makes sense? So, actually, what else do we have in the API? We have all the management of directories like creating files, new files in the director renaming files, deleting files. That is not a big deal. It's very niche also. Okay, if you need to manage a directory, and that's all.

[00:05:24]
So yeah, we could manage binary files, but yeah, it depends on the file you're, parsing to see what you do, okay? But the API is pretty simple. It's not really complicated, okay, to read file or to write files. Just remember these happens completely out of the quota, okay?

[00:05:45]
So if you wanna use a terabyte, you can, the user granted you permission. So over that folder, you can, okay? But just remember, it's a public file system. So anything can happen outside of your web app. Make sense? Any question on the file system access API? Remember for now is chromium desktop.

[00:06:14]
So that's Google Chrome, Microsoft Edge. Sorry what?
>> [INAUDIBLE] Brave.
>> Brave, Opera and many others. But anyway, I'm not sure about Brave, we should check. Actually, I'm not sure because Brave disables many APIs from Chromium. A lot of APIs that have to do with privacy and things, so there is a good chance that Brave has disabled that API.

[00:06:46]
I don't know, I don't have the answer, but it's possible. There are many API's like example Bluetooth or USB, Web USB, they are disabled on Brave.
>> I also do not know [LAUGH].
>> That's fine.