Handling Form Data and Uploads with React (P2D11) - Live Coding with Jesse

Key Takeaways

Hey, it's Jesse and um today I've been doing a lot of research on uh how to do file uploads with uh with Node. So, um, I'm going to fill you in on what I've what I've learned, what I'm thinking about doing, and, um, maybe you all have, uh, some better ideas. Um, so on the screen now, you can see I've successfully set up a, um, let me take this out really quick because I just added that in there. I haven't really done anything with it yet, but so I've successfully set up the server.js file. So yesterday I was talking about that and had um I think it was Kevin that had mentioned like just put a server.js file in there and it'll work. Um and it that's it. That's exactly what happened. It worked. So I put this in here and I um it this is like straight from the documentation uh on GitHub for create react app. So really simple and it worked. I started it up. Uh, and basically, so it took I did have to build. So, uh, I ran yarn build, created this build folder, and now it's just serving everything, uh, from that build folder. So, really cool. Everything works. So, this is then where we're going to handle our uploads uh, in our server.js file. So, I was thinking about using this package uh Molter because I've used it before with React uh to do file uploads. So, I thought why not why not try it again? But maybe there's something newer and better out there that I don't know about. Um, so let me know if any of you have experience with that. Uh, otherwise I think I'm going to go ahead with this since uh I I at least have some experience with it. Um, I do have one question in live chat. I'll just answer it right now uh so I don't forget since it's the first one there. Uh, Don asked does did he already set up some uh JWT so JSON web token uh off with uh Express JWT, etc. No, I haven't set that up yet. Although I probably won't need to for this project. Yeah, I don't think I'll need to. There's another project that I did that I really, really want to redo uh in React and I might need it for that. So, I'm going to keep that in mind uh for the future. Uh, let's see. Oh, pull request. I've got some really exciting news from the pull request. So, check this out. Let me look at this. It's a SAS file. So, this is SC CSS syntax. So, Patrick uh submitted a pull request where he set everything up so that we can now use SAS on this project. So, if you uh clone this repo, you can use SAS, too. Uh yeah, I'm I'm super excited about it. So, um, yeah. So, I haven't actually written any SAS yet, but, um, I'm excited to be able to do it. Uh, can have variables and all the other awesome stuff and be able to nest things. Uh, so really cool. I I honestly didn't realize how much I missed SAS until I had it back again. And now I'm like I'm so happy uh because I haven't used it for well for this project or for the last project and that our last project was I mean what that was at least a month of of working on that I think. Uh so yeah and then actually what I was working on before that was like an existing project that I had to work within the constraints of that project and it didn't have SAS. So, it's been it's been months since I've been able to use SAS. Uh, so if you're not familiar with SAS, it's a CSS prep-processor. So, it allows you to do some stuff with CSS that you can't normally do. And then when you're ready, uh, you have you have it set up so that it converts all of that SCSS or SAS into CSS that browsers can can read. So, that's what I'm talking about here. So, it just makes it really nice. And uh as the project continues and we actually write some things in SAS, uh hopefully you'll get to see like some of the advantages of using it. And uh it's it's just so some things are just so much faster to write uh if if you're using uh SAS. So uh hopefully we'll get a chance to um show show the advantages. Uh had some other pull requests as well. Just want to make sure everyone's caught up with with where the project is. So, let me let me double check. Uh, yeah. So, we had uh two other pull requests. Um, so the the SAS one was from Patrick and then Kevin submitted two. One was actually it auto calculates uh the pixel height. So, if you remember yesterday, the last thing that we did in this tutorial was we were vertically aligning it, but it was off and it was causing the scroll bar as well. Uh because we had set this section at first, we had just set it to be uh this container div that basically is here. It goes from here to here. We had set it to be 100 uh% of the viewport height. Well, then we obviously it threw things off and it made us have a scroll bar. Uh, so we needed to deduct the height of this this nav at the top. Well, I just hardcoded like 64 pixels cuz that was pretty much the height. It was It's actually like a fraction of a pixel smaller than that. Well, um Kevin I I think he even said it during the live stream was like, you know, we maybe you should autocalculate that. Uh so he went ahead and did it himself. Uh so now this gets uh calculated. So even if we end up making this bigger or smaller, it doesn't matter. It'll always look good. Uh so that's really cool. So I mean you can check out the code for that. I'm not going to go through any of the pull request code like line by line because I think what we're going to attempt to do today is a pretty uh involved project. So I want to uh save as much time as I can for that. So that's really cool. Also he added some more testing. And uh if you check out the uh closed pull requests in this this repo and the link to the repo is in the description you'll see so in the latest pull request for um end to end testing says pull request 23 uh Kevin had a really nice description of the different types of testing. So the one that we've been doing and then it so other types. So check that out. Um if you're if you're new to testing, you're not really sure what's going on there. It was a really really good description. Uh and I got a lot out of it. So thanks for that. And then not only that, but Patrick also explained his pull request from yesterday. Uh if you remember yesterday, I went through and I showed what he had done. And for some of the parts, I said, I honestly don't know 100% what's going on here, but I know it works because I tested it. So Patrick went through and provided an explanation, you know, pretty much line by line of everything that that he had done. So if you like me were slightly lost uh by that that code, uh then check out that that description. And that was on pull request let me let me see I have it on the other my other screen here. Um 19. So, pull request 19 and pull request 22 have some really good uh really good comments, good information on there. So, thanks uh thanks again Kevin and Patrick, not only for the pull request, but then for taking the time to explain things to me so thoroughly. I really appreciate that. Okay, so let's go to our service request form because this is where we have our file upload. This is where we're going to be focusing on. Not really anything with the the visuals with the UI or anything like that. Uh we're basically just we're going to be setting up uh this server.js file. So, as you can see, I brought in So, right now, like this works. Uh I can turn this server on. I could go to localhost 9000 and the site it works. It looks good. uh just the same as it does uh you know through Enro. Oh, I forgot to turn Enro on. Let me do that right now. And actually for for right now I'm going to turn on the um port 3000 version of this. But if we start with the file upload stuff later on and we start running things through port 9000 on our from our server.js JS file. Maybe I'll switch and I'll run that through Enro. Uh, we'll just see how it goes. All right. So, what do we got? Here's our URL. And I'm going to put that in the live chat. Oh, there's a lot going on in the live chat. Let me take a look. Uh, Adrian asked, "Do you use Meteor with React?" I have not used Meteor with React. Um, is that a thing? Do Do people normally use Meteor with React? I'm not I'm not really sure. I've I've um seen some demonstrations of stuff built with uh using Meteor, and it looked really cool and um like super fast. Uh so, I'm definitely interested in Meteor. I just don't know a whole lot about it. Uh Muhammad asks what's the what's the difference between uh SAS and SCSS? Uh the syntax slightly different. Uh with SAS it's based on indentation. Uh so you don't have like your curly braces and things like that. Uh, and I see John uh Hansen had had answered as well. I just thought it might be a good question to uh repeat out. Um, so yeah, mainly that's that's pretty much the difference. Just a little bit different syntax, but they can do the same uh I think all the same things. Uh, the benefit though to using SCSS is that you could copy and paste normal CSS into an SCSS file and it'll still work. If you tried to do that and copy and paste normal CSS into a SAS file, it would not work. So that's why I use SCSS instead of SAS. If that's that's really the only reason. Otherwise, I think it's actually faster to write SAS uh than SCSS. Okay, I was just double checking and seeing what's going on in the live chat. Okay, cool. So, I had some answers uh about Meteor. Uh so, evidently Adrian is learning Meteor and React uh together. So, that's awesome. Um, Patrick says, "I think Meteor is moving away from defaulting to Blaze and is defaulting to React." Okay, that's really cool. I'm going to have to read up more on that because it's been probably over a year since I read or saw anything about Meteor. So, I need to need to catch up. Okay, Kevin says the downside to using the custom server is that I'll lose the hot reloading. Yeah, I don't like that here. Basically, what I'm thinking is uh so let me let me fill everybody in on what's going to happen. Uh so like right now I have this running on port 3000 local host and this is through the the create react app server. So, it comes with cool stuff like like hot uh hot reloading and like everything else is hooked into that uh that start command. So, now like our our SAS uh compiling and stuff. So, um that's really good and I don't want to lose that. What will happen though if we run Let me see. Oh, I don't have it running anymore. Okay. So, I I was going to show you the screen where I have the other server running, but I turned it off. So, when we start running this, like like we lose all that. So, what I'm thinking about doing is getting the file upload and the form stuff to work, making sure it works with this, and then doing the rest of the development like we normally did, and basically just kind of ignoring this until uh we're ready um ready to move this into production. I don't know, maybe there's a better way to do that. But I mean, I because I don't really need the file uploads to work all the time. I just need them to work once so I can test it. And once I'm satisfied that that works, then I'm I don't really care about it. Okay. And uh there's someone in the chat and I can't I'm not sure what their name is because it's not in normal characters uh that I'm used to. Uh but they're asking about like getting started in coding and things. Uh so I just want to acknowledge that I I see uh you're asking and you're getting some feedback there in the live chat. So um yeah, like stick around, watch what we're doing and um you know, ask questions. Uh if I would say free code camp is a really good place to start if you're just beginning. Um, looks like you studied Python, so maybe like you're a little bit more advanced than that. So, you probably fly through all the beginner free code camp stuff. Uh, and probably won't slow down until you get to the more advanced JavaScript things. Uh, because you know, if you know Python, the concepts will be the same. It just the just the syntax you'll have to get used to. So, um, all right. So, I'm going to get started. I'll do one more question since it just popped up. It just uh Andrew asked if I've used Redux for any of my projects. Not yet, but I will be probably in the future uh because I'm going to take a course. I'm taking a course right now, a Udacity nano degree. I finished the first I think that I think they call each part a course. So, I guess I finished the first course. The second course starts in like a week. And um I'll go over Redux in that course. So after I finish with that, I will know at least the basics of Redux and I can start incorporating it into my projects. Okay, cool. Uh also, um as as you all probably know, we have a secondary stream going on on Instagram. The links in the description for that. Uh, so if you um if you happen to join in on Instagram, if you're watching on Instagram and you don't know what's going on, I'm I'm coding. I'm building stuff in React. Uh, so tune in to Free Code Camp's YouTube channel to see the code. All right, so let me pull over. So I I have up on my other screen screen just to show you way too many tabs of tutorials for how to do this. Okay, so this is what I happen to be working looking at right now. Uh so multiple file upload with Node.js, which is exactly what we want right here. Uh so I've been checking out different tutorials. I haven't seen one that's like perfect. Um, one looked really good, but they uh it was in Typescript and I thought I don't know anything about Typescript, so I'm just going to try to find a different tutorial. So, maybe Typescript's not that different and I I could have figured it out, but uh I figured there's got to be a lot of tutorials on this. I could just move on. Uh so, like this one's using Ajax, which we're not going to use Ajax obviously. Um, but it seems like the common thread between a lot of these tutorials is that they are all using Moltar and some of them are using body parser. I don't know if we'll need this or not. I did use this in my last project, but looking at the documentation for Molter, it didn't say that you needed this. So, I'm maybe this used to be needed and now you don't need it anymore. Uh, not really sure. Um, it looks like, yeah, this looks like this is not going to be a lot of code. This one seems to be the most straightforward uh, of the tutorials. There's not a lot of extra stuff in there that's that will be confusing that we we won't need. Um, so I'm going to copy a lot of this. I you know what I do want to know about body parser. Let me go back to the multair documentation. Uh, if anybody knows anything about this, please, you know, let me know in the uh in the live chat. Definitely open uh to your suggestions. Also, let me get my um Pomodoro timer going. uh if if you're not familiar with the timer. So, this is a way to kind of organize your workday and track things. So, I use this normally, but for the streams, I use this to remind me to stop coding and talking and instead check the live chat so I don't miss too much. Uh so, yeah, let's just um I'm probably going to end up copy and pasting this and just testing and see see how it is. I also have somewhere in here in one of these tabs the older project that I had done where I did something similar. So, I can refer to that as well if I need to. Uh because I I know it works. I know I've done it. Uh I just need I'll probably pull that to my other screen because I need to make sure I don't have anything. Uh since it's a private repo, I didn't bother like hiding any of the keys or anything. So, I want to make sure I don't have anything in that file that I shouldn't show uh everyone on YouTube. So, I might I might not show that. I might just copy and paste some stuff out of there uh and then bring it over. But, it looks like it's really similar to the tutorial. So, okay, here's the Molter documentation. So, let me bring this over to show you. So, this is this is the package that we're using. Actually, let me before I forget, I'm going to make this bigger because I had a comment on one of the videos sometime within the last day of somebody saying that I need to make it uh make this stuff bigger. So, I apologize. Um, when I'm not streaming, I make it smaller so that I could see more of the code. And I probably have forgotten to make it bigger. So, uh, sorry about that. Uh, this this ought to be big enough. I think this seems seems pretty big. Let me know if it's not. Okay. And then I'll also make this a bit bigger as well. Probably too big. All right. So, for this, like I said, they're not using the um the body parser at all. So, I'm not sure. I think I may end up just using it uh because that's how I did it the last time. That's how this tutorial does it. So, it'll probably end up going more smoothly if I use uh what's the um you know, exactly what they're using. So, hey, we got somebody in uh Oh, cool. So, it's uh uh U is is also in um the Instagram stream. And sorry if I'm mispronouncing that. I think it's Uday. But I just want to bring that up because I hope he doesn't mind me saying this, but today is Uday's birthday. So, happy birthday. And uh that's it's really awesome that you're watching uh my stream on your birthday. You can be doing whatever you want, I guess, on your birthday. So, anyway, thanks thanks for watching. Hopefully this will be a good stream and we can um uh do some accomplish some cool stuff here. Okay, cool. I got some in the live chat got some info about the uh body parser package. Uh, so Kevin says, "Body parser parses query parameters passed through the URL and form encoded data or JSON in the body of the post request." I don't think you actually need it. Okay, cool. John. Okay, John recommends looking at node formidable. that's worth worth checking out. Um, since we haven't really done anything yet, this is the time to explore alternatives. So, let's check this out. Okay. I always I just like to look when I see initially like how many stars does does it have and uh when's the last time it was updated? Okay, so within the last year it's been updated. Um yeah, 4 months. Okay. Uh whereas uh Moltter was Do we have that on the screen still? I guess not. I guess I pulled it over to the side. [Music] Uh I'm just comparing. Okay, so in terms of stars, they're about the same. Formidable is a little bit [Music] more. And it actually looks like uh Formidable is more up todate. So this looks cool. It's definitely uh worth looking at. Passing form day especially file. Yeah, this looks like what we want. Cool. I like it so far. Wow. Okay, it looks like this may already be integrated into Express. Oh, it looks like there's a lot more to this documentation as well, which I guess is is a good thing. Um, see the uh the MUT documentation is is pretty short. Oh, I guess there's more to it than I initially thought now that I look at it. I guess I just didn't scroll down enough. All right, what do y'all think? I'm I'm kind of split here. Uh, I'm going to I'm I'm open to suggestions um to see if you all have any opinions. Should we try to do this with uh Molter or should we try to do it with Formidable? I'm I really have no idea which one is the more widely used of the two. All right. And I'm going to pull I'll pull the documentation over and then that way we can have all the code on the screen. Kevin said, "Maybe branch off and throw a coin." Yeah. So, I'm actually working. Just so you know, if you want to check out the repo, um I don't think I've pushed any of this new code up yet. This is a new branch. Uh wow, that's really small. Um this is a new branch and I named it custom server. So everything we do now will be in terms of this will be on the new branch so we don't mess anything up. And if we get it to the point where we're confident that it's working and not messing anything up, then of course I'll merge it back in. Uh but so for now I don't think it's it's actually uh available but I will before I leave today I'll make sure I'll push whatever we're we did uh up to uh to GitHub and that way you all can see it. All right. So, I'm trying to see if I have a coin in here. I mean, oh, yeah, actually I do. I have a coin in my backpack. So, I am actually going to throw a coin. So, you can you can't see this, but uh you could uh if if you're on the Instagram feed, you'll see it. Um so, what do we say? Uh heads will be formidable and then tails will be uh uh molter. All right. So I'm flipping it now. It's heads. All right. So we're going to go with formidable. Oh, okay. And now Joseph uh put in the live chat that Google has you can do Google uh coin flip. So we didn't What am I thinking? Flipping a real coin. You know, there's got to be a virtual way to do it that's better. All right, but anyway, uh flip the coin. It's formidable. So this is like real serious uh coding here, right? We're making making big decisions by flipping coins. Uh all right cool. So let's then remove I think I had already added uh yeah I added this package. I'm going to remove it and then let's maybe we have to add formidable. So I don't know if you caught it at the beginning of the documentation but it seemed like it was saying that it's already included in express. So, I guess we can find out by just trying to use it and seeing if it works. So, I'm going to do that. Let's go to our code. Let's get rid of this. And I'm I guess I'm just going to try to paste in some of the just really basic uh example code. Oh man, they're using ver instead of const the sample code. What the heck? In case you don't know what I'm talking about by that, it's the ES6. you can use constant let instead of ver to declare your your variables. So um if if you can't if you're if you're using a transpiler then definitely use uh const or let. All right so I'm just trying to see what I need to copy and what I don't need to copy. Man, I just I don't like how they formatted this. Oh well, we'll copy it over. I can always change the formatting. So, definitely want this to be const. And I I don't like this. Okay, now that looks better. Okay. So, they're doing Yeah, this is a bit confusing. The um sorry, I'm talking about their example. So in uh Formidables uh GitHub page, it's slightly confusing because you know they have it's not set up exactly right. So like there's no express here and things like that. So I need an example that uses express. I I mean if if there is one that would be nice. I guess we can figure it out without that. But um I just want to want to try that out. Let's see. I thought there was a link to something about using it with Express. There we go. Okay, cool. Joseph uh just said there there's an express formidable. Awesome. Okay, so here is express formidable. Although it's let's see how this works. I mean there's like 30 stars. Uh, so let's let's see what's going on here. Maybe we'll use this or at least we can get some idea of how to use formidable. I mean that that looks really really simple. Okay. Um so we had some questions. So formidable. Uh so this is um Mark's asking a question about formidable. um it's going to help us upload files uh and and store them. So, we have a file upload uh input and uh we need to do something with the files once we get them. Okay. Uh John Hansen uh recommended looking in the um sorry I was looking at something else on my screen. He recommended uh looking in the examples folder in that repo and I did not. So definitely should do that. So let me I'm I'm checking it right now on my other screen. Okay, it's still looking Yeah, it's still looking pretty much the same as what was on the homepage. uh in terms of like not having express involved. Actually, it looks like there's a lot of information on using Formidable with Express. Uh just I just did a Google search on my other screen and uh a lot of people uh trying to do the same thing which is good. All right. So, uh, there is a tutorial. So, let's check this out. I think this was from 2015. So, hopefully it's not too outdated, but at least this shows this is what I wanted to see. Uh, something that's starting with Express and then also bringing in Formidable. Okay. Yeah, this looks like definitely looks like something I can use. So, I'm going to copy this as a start just to give us something to work with. And there we go. We have [Music] formidable. I guess I don't need these. Okay. So, basically off those Okay, so this handles uploads. We do need to make sure that we uh can handle the rest of the form as well. So I'm assuming that formidable does that. I mean it would it would make sense that it would do that. Okay. Yeah, I can handle form data. Okay, this is a good place to start. I kind of just like really want to test something first before I start secondguessing things and copying other things in. So, um, first thing I want to try to do is just see as I was saying before, the do I really need to have formidable? like the documentation seemed to was seemed to say it already came with Express, which I'm I'm not really sure that that it'll work like that, but we'll see. So, I'm just going to start. I'm just going to try to start the server. [Music] Um, let me think. What did I use? I can't remember what I used before. Um there node server. Why couldn't I remember that? It's the same every time you use it. Uh anyway, okay, cool. So, that was easy enough. We do need to to add it, which makes sense. F O R M. Okay. What yarn add formidable? Okay. So, we're now getting that package and installing it and all the dependencies. Okay, cool. Uh I saw uh John I saw your comment uh there about formidable does pull in all the form data. Uh also Andrew I see Andrew asks how I like the uh React Nano degree. Um yeah I um I like it so far. Like I said I'm through there's basically there's an introduction and there's three courses or three sections to the nano degree and I'm through the first one. I like the first one. The the biggest benefit that I've seen so far from that program has been being able to submit projects and then get feedback pretty quickly, like within 24 hours. And for me, it was it was always way less than 24 hours. And um that that was really challenging uh and good. So, hey, I guess somebody in the uh Instagram uh that's that's saying hi. So, hey, welcome. Um yeah, that was really challenging because that's not something that I normally have like trying to teach myself something usually is just me reading through things and trying out out on my own without any feedback from a real person. So, um that was good. my my project ended up I had to revise it a lot more than I thought I would. You know, like the first time I turned it in, I thought, "Hey, this thing works. It's done." And it wasn't. There was like rounds of I don't remember how many, but like maybe like five, I don't know. It was crazy how many times I turned in the same project thinking that I had it completely done and not realizing that there was some little bug or some piece uh you know one of the user uh stories that I just was not completing. So that was really challenging and it forced me to learn more and to like refactor a lot of what I had done. So that that was cool. I really I did like that. Now I can see the value in paying for those courses. Uh the really the value is in real people putting in work, going over your code line by line, making comments, challenging you, you know, that's that was the best part of it. So anyway, sorry for the little uh sidebar there. I um my intention was to address that question while this was loading, but it it obviously loaded way faster. uh then I talk. So now we have this and now let's just let's try to start this server. Okay, cool. This is this is good. It doesn't it doesn't say anything right now when I started. So this this means it's probably running. And we can check this by going to localhost 9000. Awesome. It's working. Okay. And now we didn't actually do anything to link up this form. So we can't test this yet. But at least it shows that like one we have formidable now and also like we don't have any crazy errors uh in our server.js file. So good step. Uh my timer went off. So I'm going to take five minutes try to go through the uh everything that's in the live chat so far, answer any questions. Um, and uh, hopefully hopefully I I may be able to get through most of what's in the um, live chat. There's not a whole lot and I kept up with it. So, after the five minutes is up, we'll go back and uh, let's link up that upload and see what happens uh, when we we actually try to upload something. All right. So, Patrick says, "Extracting 36 million cracked passwords from a 5.4 g 5.4 4 gigabyte 7zip file is really taking a long time. What are you doing? Why? How did this all come about? Okay, we did have a question. Uh, how can JavaScript help you for working? Uh, how does it help you as a programmer? Um, pretty much anything on the web now runs at least some JavaScript. So, if you're into web development at all, then uh you're probably going to end up using JavaScript. Uh, especially since like the web has moved away from alternatives. So, Flash is not really a thing anymore. Um, like Java applets, they don't you don't see those uh you know anymore. So everything is pretty much JavaScript. So um it can definitely help you with web development. You can use JavaScript in other areas as well, although you don't have to. So you can do JavaScript on the back end. You can you can build apps with JavaScript. Uh you can even do VR stuff with JavaScript. So, um, now you don't, like I said, you don't need JavaScript for that, but if you knew JavaScript, you could do all of that with just JavaScript. So, I think there's value in its versatility right now. Uh, Voose says, "The Atom editor, what does it's hackable mean? I'm new to coding." Basically, it just means that pretty much everything in the editor you can customize. So, you can actually go into the code and customize what you want. Um, it's I think Adam's an Electron app, right? I'm pretty sure. So, if you go into the code for Atom, it'll look really familiar because it'll there'll be like CSS that you can edit and things. So, uh, a lot of I mean, probably your basic place to start with that would be editing CSS to change colors, but you know, you could get deeper into it. People make a lot of plugins to um make Adam do a lot of different things. So, that's that's what they mean by hackable. It just means customizable. Oh, okay. I see. Uh Patrick said there there's a um uh he looked up at npm compare.com and compared a bunch of the form uh packages that are used with express uh in node and uh said that formidable wins by a lot. So awesome. So uh our coin flip picked the right one. Okay, Patrick said, "Surprise. Grepping a 12.7 gigabyte file with 306 million passwords to make sure your passwords aren't in it is very slow." Okay, now I know why you were doing that. Okay, that makes a lot more sense. So, that's actually really cool. So, um, let let's talk about this for a second. So, you um so you have a file with all these cracked passwords and you're checking for your passwords. Where did you get the file? Uh, Vun says, "Hi Jesse, greetings from India." Hey, how's it going? Thanks for uh for watching, for joining us. Jacobe says, "Hey, what's up, folks?" Uh just just building stuff with React. Uh how's it going? Thanks for watching. Okay. Uh Kevin said, "The Express Formidable package is really just a thin wrapper over formidable so that it works as a middleware. It's literally 23 lines of code." Okay, cool. So, probably not really a big deal to go with that then. Uh, not it's not going to really add a lot and it might help us out. So, I'm going to I'll check that again in a minute. Oh, okay. Rohan asks if I uh visit if I did visit the doctor and uh how my my hand is. So, uh, so lately my right wrist has been hurting a lot and, um, so I actually did go to the doctor two days ago. So, yeah. So, after work two days ago, I went basically I have a wrist splint, like a brace thing that I wear. I actually I can't wear it when I'm working. Uh, I tried to, but like when I try to type on the keyboard, part of the brace like hits keys that I don't intend to hit. Uh, so it just and it sometimes it even ends up hurting worse. So I basically only wear the brace when I don't need to work. Uh, and then I just like keep trying to put ice on it. They gave me like a pack of like steroid pills that are supposed to take the uh the inflammation down. And um other than that, I just need to try not to use it, which is hard cuz I'm right-handed. So, I'm constantly trying to do things with my right hand and I have to stop myself. So, I'm starting to get used to it now. Driving with my left hand was is a little weird. And actually, like brushing my teeth left-handed really weird. Eating left-handed. There's a lot of things that you don't I just never thought about doing with my my offh hand and now they're they're really weird. So anyway, that's the update uh on my my wrist. So it is slightly better than it was yesterday. Uh so I have been making more of an effort to um to not use it. And actually the ice using ice with it helps a lot. So it feels really good after I ice it. Okay. And Patrick, uh, this will be the last thing before I go back to the code here since my timer's up, but uh, in answer to my questions about the password thing, Patrick says, uh, I have beenponed.compass. Awesome. Cool. Yeah, I um I've been on that website before. I guess I just didn't look around enough. I didn't realize you could actually get lists of passwords. But um that's really cool. I'm definitely I'm going to have to go on there. I'm typing it in on my other screen just so I don't forget because uh I need to be extra careful I think with passwords. Dang it. I can't I have been ped Did I type it wrong? Uh but anyway, I need to I feel like I need to be extra careful. Uh because I have access to so many people's websites that I I I like have an obligation to be more careful than uh than normal with passwords. So, I don't know how it is with you all, but if if especially if you've done any freelancing, do you all have access to like a ton of websites? Uh because that's how it is with me and it makes me nervous sometimes. Um they especially if if my kids want to play something on my computer that I I'm like, "No, you can't you could accidentally like break somebody's website." Um yeah. So anyway, I mean, how do you handle that? Like I'm still I'm still an admin for so many WordPress installations uh for a lot of businesses and they'll they probably never ever log in to their WordPress thing. So, it's never changed. They've never like I I bet you probably 90% of my clients even from like four or five years ago, I could probably log into their site right now because they never think to change the password and I would still have admin access. I'm pretty sure I still have FTP access to people's sites and they don't even realize it. Um yeah, so I mean that's probably a bad thing. Uh, but otherwise it's sometimes you get clients, they're like, I could give them everything they need to access it through FTP and they'd never even know how to do it or want to do it. So, it's not like you can hand over that information because there's there's no one there that can understand that and use it. So anyway, sorry for the tangent, but it's a little ethical dilemma of like should should I just lock myself out of everything and then those clients would probably then be locked out because they really probably shouldn't be admins on it either. Sometimes their passwords are like really really simple. Uh so definitely should not have admin access. So it's it's a bit of a dilemma. I don't know. Let me know what you think about that. like um it does make me a little nervous. I mean, it doesn't keep me up at night, but I am a bit nervous that I have I I have so much access to so many sites, but I don't really I don't really know a good solution to that. Okay. So, anyway, in case you had no idea what we were talking about, this is the site I have beenpone.com. Uh, put in your email address or username and then it should tell you uh if anything is any accounts associated with that email or username, uh if those sites have suffered like a data breach and then potentially uh your password has been exposed. And if you use that same password on other accounts, then potentially your other accounts could be exposed as well. So, uh, really useful. I'm not going to search for mine in front of all of you because maybe I am maybe my stuff has been exposed and, um, before I'd have a chance to change it, somebody might I don't think one of you would try to get into my stuff, but uh, it's possible. Okay. So, let's go back to here and uh let's just see what are we doing now. Uploads. Okay. So, what we need to do is post to uploads from [Music] our request form. So right now I don't really care about the rest of the form right now. I want to test out the file upload first. Uh because the rest normal um uploads are a lot more simple. It's been my experience. It's way more simple to handle other form data and it's the file uploads especially multiple file uploads that are always a bit tricky. So, like I said, I've done this in Node one other time, but using uh Moltter instead of formidable. And then I've done it in PHP, which obviously we're not going to do in PHP for this project. Uh so, this is a bit new for me. Where is it at? Change. Okay. Okay, our ID is upload and I do have I have the code from my other project. So, the last time I did this, I actually did use Ajax. So, I don't think I'm going to use Ajax this time, obviously. All right. So, let me So, as I said earlier, I don't really want to bring over my previous code uh onto the screen where you all can see uh just just in case I have some stuff in there that I should not show. Uh because it it was for a client, I have no idea if they would be okay with me um showing the code anyway. Um so, that's what I'm doing right now. I'm just kind of looking at that code. All right. So, I can see Okay, I did do one thing that I did do before that I'm not doing now and I'm not sure if it's needed or not is I use name upload and then I put this in brackets. So, and now that I see that I know that at some point I did try this and it was needed. I know for sure I needed to do this when I tried to do it with PHP. Not exactly sure that I need it with this. We'll see. Okay, it looks like I do have a file that I'm pretty sure I could bring this over and show you all. So, let me show you all what I did just to give you an idea of like what what at least worked. Not sure if it's the best. Okay. So this takes um uh form data both text inputs and uh multi-art uh upload and then it submits it. So yeah so this is J it's using jQuery. So when you click the submit button uh it goes through and it grabs the values which in our case our values are already stored in state. So we won't have to actually go and select the the um elements themselves. We already have all that. So that'll be uh easy. Uh let's see. Okay. I do have a toggle. So depending on which check this this data gets sent to a different email address. Okay. And here's what I did with the form data. So, this is what I'm I'm actually most interested in. So I created a new form data object and then I appended all the the fields and then I looped through the files and I appended that as well. And then I use Ajax to do a post request or to send a post to our upload. Okay. Um, so you can see these are the steps. We're not obviously not going to use jQuery to do this, but these are the basic steps that we need to follow. Oh, okay. Uh, I just So, uh, John Hutterard says, "Uh, I've been saying I have been pawned, uh, but the site is have I been pawned." That's probably why I kept typing it wrong. Have I been pawned? So, I was trying to type in I I think I was trying to type in I have been pawned. So, thank you for that. So, sorry for the uh for the mistake. So, have I been pawned? That makes more sense. All right. So, I'm going to pull this over and uh just as a reference for the steps that I need to take. So, we need the button. Where's our button? Our submit button. Here we go. So, here's our button. So, we need to have an on click and Let's go handle form data. So up here somewhere. We're probably gonna get Yeah, I don't know that we'll need to pass it anything. Okay, so within this Okay. So, from what I understand, basically, so we're not going to use the submit button in a normal way. So, like we didn't wrap this in a form element. Um, and the normal thing would be like that you you have a submit button in your form element. It just automatically sends the form data. But normally the behavior would be that you would have a page refresh. So, at least one of the ways to handle that when you don't want a page refresh to happen, which we don't in this case, uh is that you just create your form data object with JavaScript and that's what happens when you click the button. I'm pretty sure there are other ways to go about this and maybe this isn't the best way, uh but it is the way that I have used in the past. So, it's a good place to at least start from uh to uh see if we can get it working and then we can always refactor if we figure out that this is not the best way to do it. Uh so, let's [Music] um let me check out state. Let me um I forget how our state ends up looking. Where's my There we go. There we go. Okay. So, here's our state. Okay. Should be able to do state map. Okay. All right. So, I see Kevin this Yeah, this is exactly what I'm thinking right now. Uh Kevin says you can pass a form element uh to the constructor of form data and it will be populated with the forms current keys and values. Okay. Yeah, that's what I'm trying to do. Basically, I just want the uh the keys and values to be in the form data object. So, what I was what I was thinking of doing was I was just going to map over all those and then append them. So, is there then a uh better way to do that? Okay. All right. So, sorry, I was looking up some things on the other screen. Um, so you're saying basically I need to use a constructor. Oh. Oh, but you would need a form element. You can map over them, but you need object. entries. Okay. So, I was reading that out from um from the live chat. Oh, okay. Okay. So, basically Kevin is saying in the live chat here that I was trying to use map uh which is not the right thing to use here because we use map with arrays and um state is an object. So should not be using map. So any just I'm so used to using map because normally well at least in our last project we dealt with uh JSON all the time and used map with it. Okay, I got a link. All right. So, John uh has sent a link in the uh live chat uh for using form data uh from MDN. So, that's pro that's probably a decent uh idea here to look to check out form data before. Let me pull this over on the screen then. Okay. So, basically it so we're all on the same page. The the what we're trying to do right now is get all the key value pairs that are in state. That's all the information that's it's in the inputs. We're trying to move that into our new form data object that we've uh we've created. So, we're basically here at this point. It's empty, right? Uh, and then what I was going to do was loop over everything and then just append, but this is what we want to do. Well, not exactly this. So, because this is still um uh assuming that we wrapped it uh in a form. I guess we can we could, right? There's no reason why we No, I don't want to because I'd rather get it from I think I would rather just get everything from state. I'm not sure is is there what do you think is there any value in using kind of the more traditional form element and then just preventing default uh on when we click on the submit button and then doing what we want. I mean, I guess that would give us everything that we needed, all the values we needed. And tech, like those values would all be exactly the same as what's in state because that's where the the values are coming from. John said I went to the wrong page. All right, let me go back. Form data values. Okay. I'm not It looks like values [Music] are This would tell me what all the values are from the form data object. But I guess what I want to do is get stuff into the object first. Okay, Kevin has put some code in. Okay, I see Kevin Kevin stuff. Let me copy this over. so everybody can see this. Um, I'll just add this down here. Okay, so this is what Kevin has um pasted or uh typed in the live chat. Uh, so basically this state map mapping over this Okay. So, we can do this. But I'm I guess I'm still now that I I saw it, I'm still wondering, are we are we trying to do in JavaScript something that the form element already does for us? Should we just use that? Is would I mean, is there any reason why we shouldn't just use that? So you know again like basically you know this and then creating our form data object with what's already in this this form. which is fine. I'm fine doing it either way. I'm just kind of wondering what the I is there a best way in this situation where we at because there'd be a lot to wrap a form about you in. Yeah. Okay. So, John says maybe wrapping it in a form seems easier. Um, okay. Okay. And then Kevin adds the the code would just be uh appending the key value pairs. So like that. Um okay. So Ombberto is saying uh if you are not going to have a way to handle an actual post with postback then do not rely on client side JavaScript to perform prevent default. Okay. So this is a reason against using the form uh element. So just wrap everything in form tags. Okay. All right. So, I mean, that's what I was looking for basically is if we could think of any reason why we should not use one or the other. So, let's let's go with this then. Okay. So within this, let's pop this in first. All right. So Kevin, let me look at this. So, I'm actually not. I actually don't really understand this part and what's going on here. So I'm assuming that this was necessary to be able to use map on the state because originally you're saying we can't use map uh on the state uh because it's an object. So if you if you uh can if you'd like to please let me know like just a brief explanation of what's going on here. Uh, and then I'll I can read that out for everybody because maybe you all get what's going on here, but I'm slightly lost at least uh at this part. So, I can explain the rest uh which is basically um we're going to iterate over everything in state which are all our our key value pairs for all our form inputs and then we're going to add it to this form data object. And then the form data object is what we're actually going to pass over to our server uh.js. And then it's going to be handled here within this. Okay. So everything in here is where we're going to actually do what we need to do with that data. Okay. Cool. So I have an explanation now. Uh Ro Red Rod Rangshu uh says the object.ent entries method returns an array of a given objects own innumerable property key value pairs in the same order as that provided by a four in loop. Okay. So basically it's doing we could have done the same thing by using a loop but that's just a much shorter way of doing it. Am I understanding that correctly? Uh Jacob says it almost seems like you don't have to use the map function. Yeah, that's a good point. So, um, yeah. So, if this is already going to go over everything, uh, do we do we need the map? Okay. So, Patrick said it's it's a second array of key value pairs. that that line is dstructuring those back into key value. Okay. All right. I'm starting to get it. Starting to get it a bit more. Patrick says it's two-dimensional. So, okay, cool. So, um Rude, uh Rude Rangshu is has uh put the link in the uh live chat for the uh MDN article on it. So, I'm going to just save that and uh check it out. I'm going to check it out later on. And um just so you can see. So basically, if you look up global object, why is this going off of my screen? That's odd. Uh anyway, um global uh object object entries. If you search that on MDN, it'll probably come up. Okay. All right. So, Patrick has put in, let me paste this over. So, in the live chat, uh, Patrick just put in, so it ends up being like this. Okay, which this makes more sense now that this basically allows the map to work because now we are dealing with an array. Okay, so John Hutterard says, "Speaking of since this is a teaching video, you might want to edit the soundtrack for the right website." So, it's Have I been pawned? Maybe we can put out a cliffnotes version of all these live chats. Yeah, that's true. Yeah, I actually uh since these are all done live, like I I never go back in and edit. Uh mostly because so like YouTube just automatically posts them. So you can't edit a YouTube video. I'd have to take the video down and then upload an entirely different video. Uh so that's why I don't do that. It's possible that I could set it so that YouTube wouldn't automatically do it and instead I would record it at the same time that I'm streaming on my local machine. Then I could make edits and then upload. But I don't have the time or the skill to do that. So for better or for worse, these remain unedited. But I'm definitely uh interested in the idea of a cliffnotes version of all these these chats. All right. So, let's Where we at? Let's just try it. Uh, let's see. Form data. Okay. Now I want to So we need to send a post. Oh actually we need to we need to handle that those uploads. So basic if you remember in our um well I'll just show you in state I believe well actually let me check I was thinking that in state like basically we're just going to have the names of the files correct I thought that's what how we had it. I'm pretty sure that's how we had it. So obviously like we need more than just the names to send. Okay. I'm trying to find um how I handled these uploads before. Now I can't find it. I had the screen up. All right, I'm just going to start closing some windows here because I can't find anything at this point. There we go. That's what I was looking for. It's looking on the wrong screen. So, okay. [Music] Um, let's go. We need to append the files. So if we grab what I think we just named that upload. So, is there's got to be is there like a better React way to get uh the [Music] value of an element other than document uh getelement by ID. Is it upload or uploads? Upload. Okay. Use ref. Okay. Okay. So, I can use ref. I remember trying to use ref at some point within the last six months and not getting it to work. So, I'm going to look up in the docs how to use ref. So, here's ref. Okay, Kevin says you can use react.find node react element. So which way is between the two ways between ref and using react.find node uh which way is the better one. Oh man, I kept thinking like, you know what? My timer hasn't gone off for a while. And evidently I never reset it after the break. So, um, yeah, it's definitely been enough time. Let me do a short break then and go back to the live chat. I'm sorry I ignored you all for so long. Um, and then we'll come back. Uh we'll get this to the point where we can at least give it a shot of uh testing it out and uh and then we'll um then we'll end. So this will be I'm I'm definitely going to keep this short since we're getting towards the end anyway. Okay. So, uh Brock says, "Jesse, thank you for doing this." Uh, you're welcome. Uh, I've he says, "I've watched the first four videos and this is the first live session. How many days do you expect this project to be?" Um, actually, uh, I got some information today from one of my co-workers that we might be changing more about this than I thought. So, I'm not really sure I can give a good estimate right now. Uh, because if there are going to be changes, then it might be bigger, a bigger project than we thought. And then also if they're going to be changes, I might have to wait and have things reviewed uh before I can actually put the changes in. So I mean nothing like codewise, but just the text that's going to appear on there might have to be reviewed by multiple people before it's approved to be on here. So that could lengthen things. Uh, so I would I would say like I mean what we're on day 11. I mean I kind of think we could have this usable by day like 20. Um, this is probably the biggest thing that we're working on now. Everything after this is going to be pretty easy. Uh, we'll have to take some time to set up a server, but that shouldn't take too long. Um, yeah. So, I'm gonna guess maybe around 20 days if everything goes well, and there's not a lot of changes. If there's more changes, more than that. Kind of didn't think this would take that long, but I also thought that we would basically be copying over all the stuff and not changing much. So, um, we'll see. We'll see how it goes. I really hope I don't have to like stop and go to a different project and then come back. that would just mess up the continuity of the streams. But if I'm waiting on things, you know, text to get reviewed, I can't really do anything about that. Uh, Alberto says, "Hello, I'm from Cuba. I'm also learning React and I like your videos a lot. I could contribute with your project by adding progressive web app capability. Let me know if you're interested to coordinate. Um yeah, actually that's um that sounds really good. So, uh yeah, Alberto, um yeah, let me know. I mean, you could I mean certainly it's on GitHub. You could do a pull request if you'd like or if you need to uh like talk talk about things with me to get it to a better place like let let me know because I'm definitely interested. Uh I'm I'm interested in that. I appreciate you. uh uh offering to help with that. John asked, "When I was talking earlier about having passwords to everything, uh I mentioned I don't like my kids on my computer." He said, "You don't have your own desktop login and your kids another would save you a lot of grief." Yeah, on my um on my MacBook, my kids don't have a login. It's just me and my wife. Uh so I I pretty much never want them on the MacBook at all. I do have a Chromebook uh that they I'm surprised at how durable it is. Like my kids destroy it. They spill things on it. They drop it. They take it like everywhere. uh they take it outside and just lay it on the ground in the grass and stuff. It's crazy and it still works. Um so I probably should make an account for them because they usually just use my wife's uh login. Um but that's a good idea. I haven't really had to worry about it until now because they haven't really used computers that much until kind of recently. So I'm going to have to think about setting things up uh in a better way. Uh Brian says, "Use one password and generate unique passwords for each site." Actually, I use I use uh Last Pass. Uh so I do have unique passwords uh for my sites. Okay. All right. So, I did say this was going to be a short break and I am going to go back to this. So, I'm going to be true to my word there, and I'll come back and finish with the live chat as soon as we get this uh working, I guess. I mean, I'd be okay even if it like as long as something happens. Even if like it it fails. Uh I just want it to do something. Okay. So, what were we Oh, we were doing this. Okay. So the uh the last thing we were talking about was [Music] um the using refs. Okay. So uh Kevin says ref sounds like the way to go on this. So we'll go with that. Also, Kevin says, "Since we are not returning anything from map, you may want to change it to for each or to a for loop. Okay. Um, I guess we can change that for All right. So, we're talking about this part here and replacing it with this for loop like this. Correct? All right. And for this part, we're going to basically try to do this but using refs because that that seems like the way to go. So, as I said, I have never successfully used refs. So, I need to take a second here and check out how to use it. Oh man, I totally forgot. I've had a fan on the whole time. It can you guys hear that? Uh, can you all hear that? Is it annoying the fan? Okay, cool. It doesn't seem like anyone is the fan. It is on the lowest setting. So, uh it was just really hot in here today. So, normally I don't run uh run the fan when I'm streaming. Oh, okay. Um Okay. So on [Music] our on our input Okay. And then now we can access this by this uh upload input. Okay. Where we at? Okay. So this will select that and then within our upload input we need to get the data and append that to our form data object. So we need files. Oh, wait. Patrick says refs don't work with functional components. This is not Yeah, this this particular component, right, is not okay, good. For a second, I was like, oh no, we got to change it again. Okay, but that is good to know. So refs do not work with functional components. So just FYI. Okay. So, we need to get our our files and we need to append that. So, how's the files? Do you get an array of files or do they give it an object? I can't remember what we're going to get. Actually, let's just I want to see what we're doing. I wonder if this will even run. Hey. Oh, that's not Which one do I want to see for now? Okay. So, for now, I'm just using it at the local host 3000 because uh I don't have to build things over again. All right. So, let's throw in some files and I'll just put in some stuff here and then submit and [Music] and should console log. Yes. Awesome. All right. So, here's what we have. So we have in fact successfully selected uh our upload uh field our upload input and then we are getting the files. So here's our file list. Uh so we did up one, two, three. Yeah. So we uploaded four files. We see all four files here. Awesome. Awesome. Cool. So that's what we needed. That's what we wanted there. So now we just need to append these. So let's see. How did I do this before? All right. So, we need to wait. Actually, I wanted to see what these were. Okay. We have an object. All right. So since it's an object, we do not want to use map. Correct. So I guess we could do a four of again. And then we want data. Really we want to append the whole thing, right? And okay, uh, Alberto says, "How can I get in contact with to uh if um I'm on all all like all the different social media things. So, if you're on Twitter, you can direct message me on Twitter uh or whatever um whatever social media that you're that you use most often. You could just uh you can find the links to all my social media stuff on my personal YouTube channel. Uh and the link to that channel is in the description. Um, otherwise you I guess you could email me too. Um, you could use uh just jessewigle@gmail.com. Uh, I'll type it in the live chat for you. Okay. So whichever way is most comfortable for you. Okay. So uh Kevin I'm see Kevin offered some alternatives uh to this. So Kevin just will this then work or are If this works, I'll probably just keep it like this just for the sake of time at this point. But if if you're saying that this won't work and I need to use one of the alternatives, then uh that's cool. I'll I'll replace it. All right. So, now that we're appending that, the next thing to do would be to actually post the [Music] data. So what I want to do is use fetch. [Music] So let's try to send this data with fetch. Um what's that endpoint? It's just upload. Yeah. And [Music] then post headers. Uh, what do my headers have to be? Do we even need headers? Maybe not. Trying to look on my other screen. I have what I had used for uh when I was doing this with Ajax. So, I'm just trying to translate that into my fetch uh to make sure that I'm doing the same thing. Okay, I don't need that. It's it's slightly different uh how you put things put things in with [Music] fetch. Interesting. LL says, "I give up. It's so hard." No, don't give up yet. We're almost there. All right. Where was I? Um, body. Wonder if I can get away with this and just putting our form data. Just putting data in the body. Maybe that's all I need. I I had a lot more um to my Ajax call, but I just kind of want to see if this works. Looks like the minimum that we would need to make this work. I don't really want to do anything with the response just yet, I guess. Um, okay. Post. All right. So, at least now at this point, it would go here. Now, let's make sure we're doing what we need to over here. Okay. The only thing I'm not uploaded I'm not sure about this last part. Why are we send file? I'm not sure what's going on here. And I don't know where my documentation is at for formidable. Okay. I can't remember. We got this from a um from a tutorial, didn't we? Yeah, we did. Yeah, I'm not really sure why we're sending this and there's not there's really no explanation given in the uh in the tutorial. All right. So, I'm going through the uh on my other screen. And I'm just scrolling through the documentation. Uh, and formidable. All right, let's just get rid of that for now since I really not sure about it. Uploaded console log. Okay, so at least this should give us a console log. All right, let's try it out like this. All right, let's see. We'll um we'll build it. Let's stop the server. Let's build it. Okay. All right. Now, let's go. Let's see. We get some errors. Okay, let's check this out. We got nothing in here. I expected to see something. All right. So, we got So, nothing happened. Nothing is probably the worst thing that could happen. I would have rather had an error message. All right, let's see. Okay. Uh, the good thing is since since I just changed this, I don't need to build again. I can and what did I do with my terminal? I put on my other screen. Okay, so we should be able to just close this and then reopen it. Okay. Actually, Okay, we got an error. So, here's our error. Locus uploads connection reset. All right, cool. And we got error message here. Awesome. Well, that's I wanted at least an error message. Not really sure what to make out of this, but at least I got something. Okay. Uh, Joseph said no need for the get method also in the server.js. Uh, the get method was in here um from the this was what was came from the create uh react app documentation. So, I think I need this to serve [Music] um the the site itself. All right, let me Where were those? Let me see those errors we were getting. Okay. Reset. All right. So I guessing was trying to figure out where to look first. Okay, these are conflicting. All right, let's try this. Try this and see what we get. Where we at? That's it. Okay, cool. Got some different error. That's progress events touches error events. Oh, I don't have a file uploads directory. Uh, okay. So, where is expected at project resource center uploads? Okay. Uh, all right. Now, let's try it again. Look at that. Look at that. All right, check this out. Can everyone see that the files have been uploaded? Yes. All right. So, we did it. We got files. All right. I'm not saying that this is completely like 100% the way we want it to be in the final version. Uh but like we have no error handling. So, but basically it's doing what we wanted it to do. the files are in there. And um so basically uh our errors were our first error was pretty much we were just trying to do two different things that were conflicting here. Uh it's basically I had just copied this over from a tutorial and I'm pretty sure they were trying to do something that I was not trying to do. So this was what uh was better to put in here. Then we got a second error simply because I was telling it to put the files in the uploads directory and I didn't create an uploads directory. So I just had to create that directory. So just for future reference, if you're trying to do something like that, watch out for for those errors. Probably the first error you might not get, but this I can imagine that this might be like a common thing that gets overlooked. Um, awesome. Okay, cool. I thought I just I knew we were close. So, uh this is stream has gone on longer than a normal stream, but I just we were so close. I just didn't want to stop uh until we got it. So, really cool. So, basically we, you know, we've got the uploads coming in and now they're going into this folder, which is great. Which means um so unlike I think I explained uh in a previous stream the problems I was having with the current uploads in that uh the files are being uploaded but they're not being stored anywhere. Instead they're being sent to our project management system. And the issue sometimes is that the files don't get sent. And I know they're supposed to be files because the file names are sent, but the files themselves don't get sent. So, I'm losing the files. I have no backup of those files. And what happens is somebody from my department has to call whoever made that submission and ask them to resend or just email them the files or something. That's not really ideal. Uh, so this what this allows us to do is we have a backup of the files. We can choose now to try to send the files to the API uh through the API directly to our project management system, which we'll probably still do, but as a backup, we can also send the URL to access these files if we wanted to. So, I'm not exactly sure how I want to do it, but the bottom line is we have a backup now, so we should not lose files anymore. Would never want to leave it like this. Right now, I'm doing no checking to see if somebody's trying to upload a malicious file or anything. So, definitely don't want to leave it like this, but you could see that it works. Everything else basically is just checking things out before we do this step of actually saving the file. Uh, so now on to questions. [Music] Um, yeah. So, I see uh couple a couple of good suggestions. So, Joseph says, "Now get the return from the response and print a message accordingly." Yeah. So, we we want to do something, right? So, to let the user know that it worked, right? I'm I'm not going to do anything else for this stream uh since uh I I already applaud you all for suffering through all of that uh until it works. So, 25 of you, it looks like, uh, made it all the way through to the end. So, uh, hopefully getting it to work in the end was satisfying enough that it was worth sticking around. Uh, it definitely was for me. I feel so happy that we got that to work. Um, so yeah, definitely want to have a response. Um, Kevin says, "Are you going to do a thank you page or show a modal after form is sent successfully?" Yeah, I think probably a modal. Yeah, I think currently I show a modal, so I'll probably just keep it like that. Um, Patrick says, "You may want to think about making uniquely named folders under the uploads folder to prevent naming collisions." Yeah, that's a good idea. Um I think what I had done previously is um when I had done something like this before I actually used uh like I got the date and I appended that to the file name so that every file name was unique. Uh, and then that made sure cuz the only thing I'm thinking is can I even make folders because it's not I may have to do something else or maybe get another package to be able to let um let me make folders automatically because it it wouldn't let it didn't find the upload folder. Maybe it's already built in, but I just need to do something else to have it make the folder first. So either way, I'm I'm fine with it. Either having a folder um that's a different name for the folder, like let's say each folder has a date on it and then the files go in there, or actually changing the file names. And then as long as I keep track of what I change the file names to, uh which shouldn't really be a problem, then I can always go back and access those if I need to. So um yeah, but anyway, good suggestion. Okay. Yeah, Kevin said or unique prefix. Yeah. Yeah, I can um um add it. And usually like date date is pretty good. I mean the odds of somebody um like what what are the odds of like files being uploaded simultaneously at exactly the same time? Like is that is that even possible? Like I don't I don't know. So, okay, Kevin says fs.make directory or fs make directory sync. Okay, cool. So, there's definitely a way to do it. Okay, it looks like All right, cool. Joseph has I said I know I said I wasn't going to do anything else but uh says also send the response like this. So let me paste this in. Uh so is this correct? [Music] Uh status JSON. Um so would I can I have all these at the same time? Are these going to conflict? Um, you can tell I'm definitely a noob when it comes to using Express uh and Node.js. So, I like I've done it when I had to do it and I was able to get things working that I needed to, but um not really confident enough to customize it a whole lot. It takes a lot of research for me to do anything with this. Okay, I need to remove one. Remove the first. Okay, cool. Let's remove the first one. Okay, cool. So, and then like so I've done this now on the other end uh when I get the response I can do something uh with the response which like I said I'll probably end up having um a modal appear. So I'm I'm definitely not going to try to code that right now. Um actually I've never done a modal with material UI before. So that'll be cool. I get to learn how to do a modal. So maybe that'll be tomorrow. Uh, we'll finish up and um give the user some feedback. Okay. Uh, Red Rangu says not semicolon, it's a chain function. Okay, cool. So, want to get rid of Do we want to get rid of that semicolon? JSON success true status form. Oh, okay. Alberto is saying we can do it like this. So, lots of options. So, let's see. So, I can combine that then and do something like this. Cool. All right. Cool. I'm going to All right. At this point, I'm I'm just going to save everything. Um I'm going to make sure Let's Um I don't know. What do you think? This is Is this working enough that I could actually put this um merge this back into master at this point? Or should we leave it on a separate branch and want to get it like actually finished? Maybe I'll just leave it on a separate branch for now. Uh because it's not like it's really finished finish. It's, you know, it's we we've got the first like major step done. We've got that to work, but we still need to finish it off. So, let's check it out. everything that that we have here. Uh I do not want the uploads folder actually. Yeah, I don't really want the uploads folder to be synced. Let's put that in uh in our get ignore. There we go. Okay. Just saying. I could do a blank upload folder, not the files themselves. Yeah, that's true. I kind of want to make it uh so we were saying earlier that um we could automatically make the directory. So I think I want to do that. So um I want to not sync the uploads folder uh but instead um maybe make the folder. Um, is there a way that I could check to see if the folder exists? And if it doesn't exist, then create the folder because I think that would be ideal. Um, I don't know. Uh, we'll see. I could always add it in later. Let's see. I guess it wouldn't be a big deal right now to Get rid of these. So, I don't really want to keep them there anyway. Let's get rid of those. And then I can take this off for now. Just comment that out for now. Might put it back in. All right. So, now Oh, no. It was already in there and I No, it's not. Let me do it again. Okay, cool. Here it is. All right, I'm going to save that. But like I said, I'm not going to do anything about it right now. But so this is what I want to check uh to see if this if this exists. If not, we'll make it. So, that's what I do want to do at some point, but not right now cuz need to get this finished up. Um, how about this? Let let me just answer the questions now and then I'll worry about committing this. Uh, so I think I've gone over enough get commits that most mo pretty much most of you, if not all of you, will have seen seen me do a commit. So, you know, I normally do like to do it. Um, but uh in this case, it's been a really long stream, so I'll just do it after. All right, I'm definitely going to have to go back over the chat to get because there there's so much uh good advice here that I want to make sure I don't miss it all. So, uh, after this is over, I I'll go back through. So, at this point now, I'm going to do question and answer. If you don't really care about question and answer, uh, and you know, you want to, uh, stop watching at this point, that's cool. Thank you so much for watching. Um, I'll be back tomorrow, uh, 2:00 p.m. Eastern time. Otherwise, uh, if you have any questions, go ahead and throw them in here. I'll do my best to get through them all. Um, probably I don't want to take too too long, so I'm going to try to go through quickly because this is going to end up being a three-hour long screen. All right. So, I'm at this point I'm just scrolling through trying to find questions to answer and I'm skipping through most of the uh discussion. Sometimes I do read out everything uh if I have time, but uh I'm not going to at this Wait. Okay. All right. I found the point where I left off at. Um, let's see. Okay, we were talking about um I had said before I still have access to a lot of stuff from past clients. Uh, and it's just like a weird situation. Uh, so I did get some responses here uh about things. So, it seems like um seems like uh at least a few of you also have access to things uh like that. But Rohan had a a good suggestion here. So, I'm going to read it. Says, "I probably wouldn't want to access their sites to distance myself if they try to blame me for something that went wrong. But on the other hand, uh yeah, some people can be dumb." Yeah. So yeah, that's just I don't really want to get in and access the sites either. Um, I'm just not exactly sure what to do because I mean what what do I do at this point? You would I you'd have to contact the client, convince them that this is actually something they should care about, and then make them an admin, have them delete my admin account. Yeah, it just seems like it would be a lot of a lot of time and a lot of steps and uh probably wouldn't be a big deal. I mean, most of these sites we're talking about are like very simple WordPress sites for small businesses. So, it's not like it's going to be the end of the world uh if if something ever happened to them. All right. Uh Patrick said so Patrick was going through a bunch of passwords that that had been stolen looking for see if his were in there. Uh he said he searched password and act and and did find it uh in the list. So that's crazy. I can't believe people use that. Okay, so I'm actually not seeing a ton of questions. It's a lot of uh a lot of the advice you you all were giving me along the way. Okay, so it looks like uh Nexi asks uh is he creating a website or what? So I'm I'm assuming that that question got answered, but uh just in case. Yeah, it's it's a website. So it's um the main purpose of the website is to uh to allow people uh where I work to request services from my department through an online form. And there's going to be a few other things they can do as well, but that's that's the big the big thing that we're working on, the thing that's going to take the most effort uh and time to get working. It's funny going through this live chat now. I remember like all the things that I messed up along the way cuz I can I can see y'all saying like, "No, don't do it that way or do this." Oh man. John Hansen says, "Kids can be surprising. My son in the early days of computers had magical powers of how to get around locked sharewware games at the age of six." Wow. Yeah, I definitely gotta um uh get my computers ready for my kids because I have an eight-year-old. Uh so yeah, I need to and like I said, they weren't really on the computer too much except for like they we had a Chromebook. They just watched um shows on it. Um, but now my son started playing Minecraft. So, I have him on one of my old uh Windows computers playing Minecraft. So, I really need to get that locked down so he can just play Minecraft and not potentially mess mess with anything else. Uh, Ciao asks, "Anyone use drag and drop functionality on React app?" No, I I've never used any drag and drop stuff. Uh Patrick says Dan Abramoff wrote React DND for that. Uh DN React DN D. Uh he thinks that's the name of it. So awesome. Let's see. Uh also asks um anybody have experience getting values of dynamically created input fields in React? And uh Red Rangu says, "Put it into an array with indices for the new fields. Update the state with a new array every time a new field is added." Cool. Uh thanks for that. Uh thanks for that answer. Okay, Kevin says uh in response to that same question, in the code that generates them, pass them an onchange. Um uh and then you could just do this handle change and use the same code for handle change that I use that uh in this project. So, and add them to state when you generate them. Okay. Wow. It looks like I've gotten through everything in the live chat. So, uh there there's a lot of stuff in there. The majority of it was stuff we've already gone through. Uh it was just a lot of um uh suggestions of what to do when we were uh building this. I did get something in a language that I cannot read. So, let me translate this really quick. Uh because there is a question mark at the end. So, it's a question. Google translate is so useful. Okay. I think the question was something about are there any Russians here? So, uh yeah. So, I uh not me. I'm in the United States, but uh yeah, occasionally we do have people from Russia in here as well. So, I don't know if there's anybody in here right now, but I think that was the question is or that was what the question was. Let's see. Yeah, I think it I think it was basically just hello or they're Russians. All right, so I'm to the end of the chat. I'm actually really like exhausted after all that. Uh doing the live streams takes a lot out of you. Um, all right. So, I'm going to push this stuff up to GitHub uh before I leave today. So, probably within the next half an hour, it'll be on GitHub. Uh, and that way if anybody wants to take a look at it, uh, you'll have it there. I'm probably not going to do anything else to it. I'm just going to push it as is. Uh cuz it's getting pretty late here and it's about time for me to leave work. Um thank you all so much. You are like such a big help. Uh I know I say that at every stream, but it's it is true for every stream and especially today. Uh this was uh like this was a big deal. This was the one thing in this project that I was thinking like how am I going to do this? Um and and we did it. So, uh, so it's awesome. So, thank you and, uh, thanks to everybody for watching. Uh, I will be back, like I said, tomorrow, 2:00 p. p.m. Eastern time. Um, yeah. And, uh, have have a great day. I'll see everybody tomorrow.