Client Side React Form Validation (P2D29) - Live Coding with Jesse

hey everybody its Jesse and I hope everyone had a good weekend and if you're in the in the US I hope you had a great long weekend I am I'm back to work not quite as rested as I'd hoped to be my youngest two children were very sick all weekend so spent a lot of time taking care of them so I'm not feeling that that great myself so I'm gonna try my best to to focus and be upbeat even though I'm a little bit out of it so I apologize in advance from just a little bit a little bit off today if stuff we're working on today should be a little bit easier especially because we have a pull request from Sebastian that already did a lot of the work so the first part of this is going to be reviewing what was done in that pull request so this would be kind of a nice overview if you've never done form validation on the client side with react and that's what we will be working on today so I think I put that in the description and on my tweet but if in case you didn't didn't read it actually it's in the title as well but just to kind of explain if you're not familiar with it when you go to a form as I can demonstrate so I type in something like that and then immediately I'm told that's not a valid phone number that's what we're talking about just validating the fields so we've already implemented some things on the client side to check to make sure we have the right data mostly for the for the file upload but we also want to give the user a me get feedback right we if we just relied what's I said when it when it comes to forms right if you just rely on server-side to do all your form validation that's not a great user experience it's secure in terms of not letting in you know bad things into your server that can mess it up but the user has to wait you know they hit submit and they have to wait for a response from the server to let them know whether or not you know that they put in the right information so and if they hadn't then most likely they're gonna have to redo you know everything again what if they don't get a response back immediately say this for whatever reason the response is delayed they could think that they've submitted the form and everything's alright and not realize until later on that it's not alright so you can see like that's not the best with the client-side you get immediate feedback like we just saw which is great for a great user experience I immediately know like oh wow that's not a phone number you know definitely not a valid phone number there so that's nice but there's ways to bypass that and still submit you know let's say this as as a phone number so the best best thing we could do is to have validation on the server side and the client side so today we're gonna check out how to do that on the client side with react if you're using something else like not let's not react you know you just have a plain HTML form using some vanilla JavaScript or jQuery or something then this isn't it's not gonna apply you know exactly but there may still be some things that are worthwhile to see that that you could pick up from this so I'm gonna say how'd everyone in the live chat before you started hey everybody that's cool and I guys see some I think I see some new names in there so welcome so Jacob said appreciate all these videos thanks I appreciate you watching and saying that okay so let's let's get started with this I'm gonna set my timer we're gonna go 25 minutes of kind of coding while explaining and coding and then I'll do five minutes and go to the live chat catch up with any comments or questions that you may have in case you're interested what's that react is the library not a frame did I did I say that somebody commented cast commented react as a library not a framework yeah if I um I don't really remember saying it so maybe I said it was a framework but anyway yeah I mean sorry if I if I said that in the in the wrong way to be honest with you I'm not even sure what the difference between library and framework would be like semantically so hello okay now I see it wasn't me it was further up in the live chat that you talked about framework okay sorry about that I didn't catch that immediately but anyway yeah I'm going to tell you the truth here framework and library thrown around like interchangeably and I'm probably guilty of that as well I don't really think about it when I say that but I'm not entirely sure of where that what the definition is of each and where that line is where something falls into a framework or a library so if I use them interchangeably I'm sorry I don't I don't mean to be confusing about that but I myself as some somewhat confused about that definition but in any case we're gonna learn how to do some stuff with react regardless of what what category it is so but I'll do my best to try to remember that react is a library let's see I don't know why I've troubled with react I don't really call jQuery a framework ever I think I'm pretty sure I called a library all the time so just have to get that and in my head alright so let's go ahead and start out oh I do want to say for for anyone watching on Instagram check out the free code camp YouTube channel if you want to see the code for this it's being live streamed right now if you're watching later on though the recording will be available and then the code is also available on github you can get the link to that in the in the YouTube video this particular video is titled something it's client-side react form validation so you can check that out if you get a chance all right so let's let's get to this so you can see already how this works we have similar things going on with email we also have some some things going on with our file upload so let's let's see how we implement this first of all so let's go to our package JSON file you see we're using form Z in particular forms he reacts but also forms a material UI which is it's pretty awesome that they have that that makes things a lot easier I'm gonna say again I said at the beginning but I want to say it again so everybody knows that Sebastian did pretty much pretty much all the work actually Sebastian has done all the work for this so far I don't think I've changed anything for this yet we'll probably add to it today but Sebastian has done all this in a pull request so I want to give him credit giving for that and let's see so we want to load these two and of course these are available on github to check out the documentation but basically the forms EEGs is going to do check the validation so we don't have to write all that ourselves and then because we're using forms of material UI it integrates well with material UI which we're already using and as you've already seen it fits well we do have some weird things going on here with spacing below here which we can work on that later on it's not I mean it doesn't break anything it just looks a little bit odd there's a lot more space than we really need there but other than that it looks really nice with with material UI okay so we'll just start at the beginning of our service request J s component and this is the component that handles pretty much everything on this page so we've brought in there we go let's try to figure out where we brought informed you so we're importing form Z and we're importing form Z text and forms the check box so this will come into play a little bit later on but we have our file extensions here so these are the types the file types for a lot of the things that we do want to allow I'm gonna have to double check this list and make sure it is everything but so far it looks from from just looking over it it looks like this is everything that we do when I accept all right so let's let's scroll down to where we're actually implementing some of this so if we check out here we go all right so we have some extra things here that we didn't have before so our validations right in our validation error but if I should do this I guess I'll do it right now I was thinking it might be easier to see what's changed if we just go from the if we go back to the commit where this was added actually that might be yeah that might be the best way to do it yeah let's go back so for the part at least where I just want to show what we've done so far I think it will be best if we just can see the difference in github so I guess then go back to the original pull request okay so we've already checked out the package.json I'm gonna have to make this a little bit bigger I'm sure it's hard to see well that's that's a lot bigger okay yeah yeah okay this is what we want to look at so okay here we go so there's some other stuff that happened in this pool request so that's why I skipped over a lot because it's not immediately related to form validation okay and I actually did miss this going through on our originally when I went through so we've wrapped everything in a form Z component so I'm glad I did this because this is obviously a key thing that's dismissed so we've wrapped everything in a form Z form component okay so the you know the actual structure has changed a bit and so on valid submit that a lot of this is if you want more in-depth stuff you can check out form Z on github but a lot of it is worded in a way that it's really self explanatory so if the valid submit we just handle the form data alright when it's when it's submitted which this is you know we've already worked on that in a previous previous stream if it's invalid then we notify form error so there you go so when we notify form error we just are opening up a dialogue so a modal is coming up and I guess I could demonstrate this so let's try to so this is obviously not right let's try to submit okay so please fill out this field you can see that the tooltip comes up please felt this field and actually I think I had mistakenly said that a modal comes up it's not it's not even old actually this this does seem like yeah that does seem like that would throw up the same modal as if we actually had like a form error come back from the server but the thing is this this probably won't fire if we have the fields like this right because it's going to come up with that tooltip first so within our form Z component right we have form Z text which is obviously for a text field and so we have a lot of the same things as we had for our original material UI component so we are floating label text right name value so mostly the same stuff but we've made this field required right so if we want to submit I'll get rid of these so we don't get errors from that but before we could have just submitted this just like this but now right it will not let us submit which is nice because before on this the live version of this which is basically done with just jQuery to make something required would have actually required a bit more code than that but now to make it required keep going over the wrong screen literally all we have to do is just put required rights so pretty easy now and then for our validations we just have the field type in there so we're pulling in let me see if we're pulling in the data we have it so we now have a data file but we may not actually be pulling it in yet let's let me double-check okay we are at work we're pulling in that data and you're great so let me show you that file then because I have it up here anyway I did have it up to make sure I stove it up there we go okay so now we've we've removed the data a lot of the data into this file and by we I mean Sebastian but so you can see right we have the name we can put required true in here that's why when we were pulling this in then I'll just show you on this screen since since we're here since we're pulling this in what we're iterating over this data and you know we're not directly obviously putting in true or false we're pulling it from here alright so if we wanted to make it required we just changed the data here in our data file and we actually put in the error message as well so that tooltip that comes up we have control over what it says we also have control over the type right so we've said this is email this is alpha right so we don't want any any numbers or like weird characters in the name so this is just going to be regular letters right for our phone number we just want numbers so is numeric and then for Department we want to allow both letters and numbers so we say alphanumeric right so as I said earlier it's it's really nice the way this is set up because everything is pretty straightforward so that's our our single line the multi line set up it's pretty much the same way so we go go form Z form Z text again all right so it's the same one but we're gonna say what are we gonna multi line somewhere in here we got to say it's multi line I can't see it right now that's actually weird so I'm pretty sure with the with the original material UI components we had to put somewhere in here that it was multi-line maybe I'm just not seeing it right now obviously it's working right we can see we can see that this is actually using one maybe it's not hey let's fix this right now so I did have these as multi-line but it looks like it's not letting me make this multi-line so let's check out form Z which I think I have up on another window so there we go so if you can't tell already I'm actually reviewing this live so as we're going over this I'm reviewing I I was working on something else today and kind of saving this for for the stream so I expected that I would find some things that I wanted to change so here's the first thing let me make sure this is formed oh I'm looking at the wrong thing I thought I had formzee up already but I guess it didn't alright let's move this over because that's not what we need I think we have a link to whoops conversation Sebastian included a link to everything there we go so we're gonna check out formzee material UI I guess we'll just check out regular formally okay okay yeah that's weird actually I want to try this obviously you could see as I was scrolling through there wasn't anything there that was describing what to do so what I'm gonna do here is just check actually it'll be faster just do like this let's just check out what it was before for a multiple inputs multi-line okay so we just had to pass a multi-line and that was it so let's try to pass multi-line and see if it works I think it's worth it to try that out because if it works it'll save us a lot of time and trying to find out the answer there we go all right awesome okay I'm glad that works so basically if you want if you want to use form Z text and make it multi-line you just add multi lines so just like the normal material UI component okay great so now we have our multi line components but it works the same way in terms of validation right we we could put our own custom error message and then we can put our type for all of these it's gonna be it's the oft America afternoon the project budget we've put numeric this we may we may change this field I'm gonna leave it like this for now but we may change this field we're having some basically for the budget we could put in some people put in a budget code for their department some people put in a dollar amount but it's potentially people could describe what their budget is because it could be contingent upon other factors so we may want to switch this to it's alphanumeric but I'll need to check I think I mentioned last week that so this week I'm gonna make a server and I'm gonna put this up and it's going to be live and then other people in my department can test it out at that point I'll get some feedback on how we want to change these form fields and this is one of the ones that that may change okay so great you can see majority of these are just gonna be alphanumeric that's probably what you want normally when you have a multi-line input because why would you want a multi-line input of just all numbers right you would normally wouldn't need that okay so these are our all our text fields with the validation like that's that's really easy validation so I know I've I've tried to do my own validation before usually with jQuery it's so much harder than this I really appreciate how this is done so much so much easier I don't think we have yeah we don't even going on for the date picker which is fun for now I'll have to check and see what how you're how you can do date picker I'm assuming that you can validate date pickers with formulas we can check on that in a minute once we finish going through was here already normally if you would just use the date picker as is it's gonna format the date correctly but potentially you know I guess someone could try to enter in their date disabled I know just in case somebody has a way to try to enter in their date manually we want it to be in the correct format this is not going into a database or anything so I'm not worried about you know the exact format coming through but it needs to be readable and makes sense and the Dayton this may end up being a required field as well okay so for our file input we have accept and then that's where these file extensions extensions come in but we want okay so what I need to test out is the extensions so I need to try to upload something that doesn't fit any of those extensions and see what happens all right let me check my time okay we got about five minutes so let's test out this file upload because what I was getting before let's think okay it's not letting me accept this it's not letting me let me put in a file let's see with what I'm thinking what happened what I'm hoping will happen is that it will also alert me so let me see if I can there we go so let's say I do that so me right away you know it let me know that I couldn't use that but let's say I switched all files when I try to do something like this I want to see ok nothing happens yet let's see if it it's gonna make me fill this out there's all this requires ok let's see no I don't want my address all right I didn't realize that all these is required is everything required right now oops alright let's just fill out everything okay so it looks like nothing's happening on that file input so let me check out I want to make this a bit smaller because it's hard for me to read with it that big hmm maybe it just doesn't have this let me scroll through quickly if it doesn't have anything for this I guess we'll just skip over for now actually whoops there it is I'm looking here's the API reference this is what I'm looking for okay validations all right so I'm not seeing anything about file input in here so for now let's just just skip ahead all right and that's my five minutes so let me go let's set my um let's set my timer we'll do a short break five minutes I'm gonna go into the live chat which looks like there's a lot of activity in the live chat so I'm gonna try to get through everything in five minutes then we'll go back to it I think I think for now I'll skip over that file upload and then I'll show what's going on here with this check box and then we can go through and alter some things I definitely don't want everything to be required right now if we have time we can come back to the upload files what I would like to happen is that if someone tries to upload something that's not supported it immediately tells the user that it's not supported all right okay see text editor looks amazing current use brackets do you recommend Adam as a better text editor so the question is do you recommend Adam as a better text editor better than brackets I've never used brackets so I can't make any comparison between the two I like Adam have been using Adam for years I've also tried Visual Studio code I like it it seems really fast I'm happy with Adam but I think there's a lot of good alternatives so I would be fine recommending Visual Studio code as well the only reason I don't use it right now more than I already do is just because I have so many packages already set up with Adam and you know my syntax highlighting you just get used to it a certain way and I just haven't taken the time to set up visual studio code in the same way but you know if you're not happy with your current editor then Adams you know Adams a great thing to switch to the only complaint I've heard from Adam is some people say it slow I haven't really had a problem with it being slow for me I it probably also depends on your machine you know and how good your computer is I'm I'm on an iMac right now that has you know pretty a pretty decent amount I think I'm running like 32 gigs of ram or something that's a lot so I don't really have problems with it but if you'd notice if you use Adam and you notice that it's a bit sluggish then I would recommend maybe going with Visual Studio code because it it does seem faster to me at least in you know a little bit that I've used it but there's a lot of other good editors I've heard good things about sublime people that use vim seem to really love them I haven't taken the time to learn that yet one day I'd like to mess around with it and see if I could learn it there's what else people people who use Emacs really love Emacs so I guess I can't I've never even attempted to use Emacs so I can't speak personally about it but but I I feel comfortable saying you know Adams worked well for me and I like it I don't know if it's the best or not but it's it serves its purpose well for me okay so let's say there's some discussion about the react license and so I'm not yeah I'm not necessarily I don't think there's any questions in regard to that let me double-check yes I don't think they had any questions directly for me but just in general there's been a lot of controversy over the react license from what I understand and this is also reiterated in the live chat is that there's something in the license about giving up the right to sue Facebook if you're using react or I think there's also some other Facebook code that is licensed in a similar way based like you can't sue Facebook if you're using that so I'm not sure about the details I'm not I'm not a patent attorney I'm kind of lawyer so I don't really know but it seems to me like it's in most cases this is just my take personally on it so you know check it out for yourself but it seems to me that in most cases you wouldn't really need to worry about it I'm not worried about it for for what I'm using it for so I think it would just depend on your use case your company you know who you're working for so but it's definitely worth I think you'd begin to check it out understand what's going on before you use react in a larger project I think it's still fine to use it you know certainly on you know small side projects things like that it at least from from what I have heard it should still be fine for most people alright I'm just scrolling through the last a little bit here in the live chat before we start up again there's some mention of potentially using pre-act or view j s as an alternative i think someone mentioned angular as well okay I'm gonna go I'm not gonna be able to get through everything because there's a lot of stuff in the live chat right now I'll check it back after the next 25 minute session it looks like somebody asked about knowledge of react in regard to this stream so yeah it definitely it would help to understand what's going on if you had some knowledge and react but it just depends on what we're working on so sometimes we work on even though it's a react project sometimes we work on parts of the project that don't have that much to do with react so you don't need to know react to understand what's going on a lot of it is just regular JavaScript stuff or sometimes we're working on you know the server which we're using node for which is more JavaScript and so it kind of just depends on what we're working on today some of the stuff is I would say probably most of the stuff today is more unique to react but not unintelligible to someone who hasn't used react okay and let me I was gonna write down where I where I'm leaving off that but I can't seem to find a pen so let me bring up my node I've been using Google keep for notes lately so I'll just write down the timestamp of where I'm at in the live chat in keep since I can't find a pen all right oh cool a my said I said hey Mark how's it going alright let's go back to this I've already taken up more than my five minutes of time okay and you have to excuse me for a second I my first really it's hurting today of a mouse getting dry I need to stop and take a drink here okay okay so the last thing that I want to go over before we really start getting into it and making some changes is this checkbox here so we worked on this earlier by earlier I mean maybe a few weeks ago in a stream but we want people to read the planning guide first so you can see this is completely disabled so I'm clicking this right now nothing's working it's grayed out until we check that now you can use that so I kind of like how this is I may add I think it'd be nice to make the cursor change and maybe a tooltip come up that says you know hey you got it you got to read the Planning guide something like that yeah I'd like maybe to give some indication to the user if they're confused as to why this isn't working that they need to check this first but other than that this is working as as expected so not only is this a required field but you know goes even further that it completely disables the submit button if you haven't checked it so let's check out how that's done we'll scroll down to the bottom here so we have here we go so we've used the formzee checkbox component instead of the normal checkbox and obviously you know we've added required we name but we've also see and this may not be related to form Z this may be something that Sebastian did on his own I suspect it is something like that and I don't think he's in the lab chat so I don't think you can verify that but I'm pretty sure this is something he did on his own but it's it's a nice feature so we'll go over it because it is you know we're validating that this is checked so let's look enable submit so basically on change we're enabling submit so let's go up and check out that function enable submit okay so if it's checked we're gonna set the state the can submit state to true if we're unchecking it we want to set it to false all right so pretty simple and we could see by default it's false and then let's check our submit button here we go okay so we have this disabled property and we're just checking for if we can submit and you know we want to do the opposite right so if if it's can submit is true we want this to be enabled right so that's why we're doing the opposite so if can submit is true then this value is going to be false and if it's not true right so if it's if it's unchecked and it's not true then it's going to end up registering as true so disable true right so pretty straightforward I really like how Sebastian did that it's just it's so simple I mean it it gets the job done it's great so that's basically all we have going on right now for form validation so what I want to do now is I know there are certain things that are not going to be required see yeah let's let's just put in false for some of these and then that way if we need to go and test the form later on it'll be a lot easier primary target audience I'm gonna say false for a lot of these now [Music] I'm gonna say false now but that that's likely to change my goal now that I look at these I kind of don't really like how they're a lot of how they're worded but I'm not gonna change anything right now because initially when I did this project two years ago I think yeah I think two years ago I started this project not this particular react project but the the version of this that's live right now that was done with jQuery it's basically kind of it's common like a single page application but just on the jQuery to handle all the different views there was a lot of debate as to what these form fields would be and how they would be worded so I'm not gonna just change anything on my own without checking to it was a big deal that's what everything what it all said I'm gonna leave the description as true we need something to go by so when it need the description the Department I'm gonna leave it as false right now just for the sake of testing the form that will probably end up being true phone email I'm gonna go with funding Falls but I definitely want an email and if we make the email required then this would be better so on the server side we're sending an email and I want to send an email to the user so I don't really even want to have to worry about there not being an email obviously I'm gonna I'm gonna have some type of default if we don't get an email because someone could circumvent the client-side validation but I'd like there to the user to put in an email so that we could send them an e-mail verification and get a hold of them later name required let's um let's format this in the same way as the other ones there we go okay name sure and we want the name to be required as well let's get onions check out these checkboxes okay great so I'm gonna say that so here's what I'd like to work on now let's see if there's a way and we may have to do this on our own and not use forms a which is fine but it's assuming that that form Z does not have a way to do this on file uploads what we need to do then is unchanged since probably since we already have we already have a non change handler let's just do this in our own change so when we with the handle file path we're gonna need to check the file type against these extensions and then display something to the user if they're if they've tried to upload something that's not on the allowed list all right so ok let's check out this handle filepath so that so she'd be able to get let's let's see if we can get I'm doing this the wrong way let's see files the so with this I think we can go I want to see if we can get the type right from here so what we're doing here then is as we can see here we have this files object that we get back from our our upload field and we can get the name of the file off of it I think we can get the type just by doing tight but I want to double check my console logging I actually have two different ideas right now since we have all those types I want to use those so if we can get the type and it matches up with the with the format of the types that we already have saved here then that would be great otherwise I'm gonna grab the name and then get the file extension from the end of the name and then we'll go to our server j/s and we have a list of allowed extensions there we can copy that over and use that either way will work so probably won't matter what what we do there it's gonna work file is not defined well not defined oops file snaps area okay let's check out there's our consoles let's try to upload some stuff there we go okay so we are getting the file type I'm interested to see what the type is what type that says when I do this there's not xxe okay great so we are getting what we want from here so we will be able to work with what we already have let's see I want to see what format we have this in okay this is just a string all right that's fine we can work with this drink all right so let me let me take a step back and just explain what's going on here especially if there's someone who's kind of a beginner or doesn't really understand some of the ex6 stuff or file upload stuff so there's a lot of different things going on here that you may not have been exposed to so we're going handle file path we're using arrow functions so this is just a function and as a parameter we're passing in the event they were using the arrow function the main advantage to this other than being concise is that it binds this and in a way in react that we want this to be bound although I don't even think yeah we are sorry you see here we're using this set state if we use a regular function and try to call this set state I don't think it would work yeah we would have to bind this somewhere else if we wanted to use the regular function so in particular we'd have to bind it in a constructor why not I'm not going to go into that right now we've talked about that in previous streams so anyway I think an arrow function here is the best way to go to accomplish what we want to do in as few lines as possible but if you're not familiar it's just a shorter way of writing a function so for our purposes we really just need to know what's going on here right now so we're getting so we're setting this constant as files and any time you see Const or let think variable okay there's there's some things going on with scope and mutability whether you want to use costs or let but it's just another way to make a variable so we have this target dot files right so our event target that we've passed in the event all right and we're just grabbing the files from that okay so now we have an array of files and I might be easier if I console.log what's going on here let's do that let me put in some console logs I think it'll be I usually get things a lot easier if I can see it so let's type let's put in console let's just put in an event for nought and I think we should be able to see everything we need to from that so let's try to upload multiple files here ok great so we have ok so here's our event right and we can access target let's see if we can find it I was gonna be getting in here so I've been targeted files I'm not gonna be able to get this hmm I might have to go down another one let's go let's get event.target okay so here we go our event target is simply our input right so we're selecting our input and then we're getting our our files off of that so one more time I'm going to change the files there we go so now you can see what we're getting we have an object and we're getting our files and then we have some values from there all right so we have our name and we have our type right our file size so we have a lot of useful values in here especially useful for a validation so that's what we're getting right and that's what we're we're doing here I guess just to show you the difference of what's going on here let's throw this there we go this should hopefully be the last time we need a console.log for demonstration purposes alright so you see before we had an array now we have or before we had an object now we have an array of objects right so that's just for the purposes of being able to iterate over it using map over we're using here alright so that's all we did there so now we're already grabbing the file names and we're using that to display so we're not using the default upload field that's just the default HTML field because it's not pretty so since we're using something different these are two different inputs this is a multi-line input and we're actually grabbing the file names from our upload input and then putting them into this field here that's why we need to do that but it's nice that we're already doing that because a lot of the stuff we need for validation is already written out so now what we're gonna do is we're gonna grab that type which we've been console logging already and let's get rid of this we don't need it anymore so now what we need to do is check every for every file we need to check the type and make sure that that type is included in our list of allowed file types if it is then we're not gonna do anything it's just gonna go through as normal if it's not then we want to show the user some feedback so for now let's just get it get the check working then we'll decide how exactly we want to show the feedback to the user I just saw Praveen in the live chat just as is it react yes yes it is react Jaso let's go with and I'm gonna I'm gonna have to check the syntax on this because I always get it wrong [Music] actually I could just check in server dodge is because I've used it so here we go all right match use match you don't really need match like this yeah we can use this so yeah let's use this I was just checking because I can never remember the order so you can see the difference between with match we put in first like the name of the file and then we type in like what we want to match it against with test its opposite first we have our list of what we want to match it against and then we have our our individual value so I just wanted to double check head so that's what we're gonna do so we want to do is actually let's let's console log this console of this for now so we can see if it's working so for this we want to do our then I don't remember what the name is there we go our file extensions list actually no this isn't how we want to do actually we do want to do this a little bit different from we are doing so I forgot it again sorry file extensions and then alright let's see what it does I think I'm confusing myself Asst which one goes where but let's just check it out for now whoa hmm yeah I think I put that back okay the shad is done now again hmm I don't something wrong let's try it with match and I may have to switch it around okay okay this will work I don't know what I was doing wrong with tests but this is fine this or two so you can see we're getting values all right so in this case we're getting an array if it matches if it doesn't match for getting null so an easy way to check this it's just so we'll go you see where my if it is let's see dot length is greater than zero then actually let's just return this I was just math linker is here this should be sufficient oops oops Cantrell active no okay all right so they are getting true there let's just change it then and say all right this should give us what we want books okay there we go that's what you want so we tried to upload two pings and then one xcf file so we got two trues because things are on the list and then false because xcf is not on list so that's the behavior that we want let me check my timer did that go off or did I just forget to set it let me see what time it is no that definitely went off okay let's take a short break and sorry about that I just did not hear that at all all right I'm gonna go back to the live chat right now and try to catch up now I'm gonna scroll back up to where I left off see okay we were when I left off that we were talking a little bit about code editors and I was saying that I've heard that Adam is a little bit slow but it runs fine on my machine and Blake said Adam is pretty sluggish on his machine shroo John s which coding software are you using sir if you're talking about my code editor it's Adam if like in general we're for this project we're using react ok kerlick says I just tried Adam code editor and in my opinion it is terrible comparing with brackets okay so yeah I've never used brackets before so like I said I can't do a comparison but but that's good to know well like I said I'm not I'm not gonna switch to anything else right now until I you know if I get some time it let's say I'm in between projects or something and I have time to really try to setup a different editor the way I like then I'll think about switching but for now since Adams working for me then I'm just I'm gonna stick with it alright matt said what are you what are you doing with the image uploads planning on displaying them elsewhere accident no I didn't have any plans on displaying the image uploads anywhere it would be cool it would be a cool feature and this will just go on like the nice to have list of if we have time I'll put it in there but it might not it might not be a bad idea to display thumbnails of the images when they're uploaded that would be kind of nice to do but for now the only kind of feedback the only thing we're doing with the images for now are they're just going to be stored on the server and they're going to be sent to the project management system that we use okay and I've actually got through I've got through to the bottom of the live chat so and I still have one minute left okay so we'll probably do I'll probably just do one more Pomodoro session we'll see how much we can get done with this file uploader and hopefully we can get it finished you know or at least to a point we're kind of displaying something I mean right now it basically works we're getting the result we want we just need to do something visually now but like I said we'll do one more session and then I'll answer any questions that any of you have in the in a live chat there we go so let's start up our session I think what I what I'd like to do I'd love it if we had the same style of let's see so not that one let me see so this I think something like this would be great to have for the file upload or at the very least something like this would work as well so it would it would turn this line red and then underneath it would say that it's not a valid file extension actually all right so I guess here's what I was just thinking I wonder if I could just use the form Z validation on this because this is just a multi-line input and somehow give it a white list of file extensions to check then I mean we already have it working for the file pose but then we wouldn't even really have to have to check here the only I mean potentially you could probably get around this but for for the normal users not trying to get around it you know that's really what I'm worried about here is giving them useful feedback immediately I think it would work and it might be easier to implement so let's check it out we'll just we'll just try something here there we go here's a file upload ok so right now this is just the text field and it's not the form Z field then you check out let's check this out there we go this is what I'm looking for we could do a custom validation okay so it looks like we can use this we can use this function within validations and do whatever we want to validate that that's it this is exactly what we'll need okay I'm not I'm not really sure either current values in the form oh here we go that may be this is business what one aid I've been through some forest community I think this might be what we need to okay all right let's try this [Music] so I'm not I'm not a hundred percent sure but I think that this would be the best thing for us to use so let's try it out on our multi-line here we got validations and then let's get it Haitians error let's just try this just to see if we get the air which we should now we're not knocking the air oh I didn't switch it to form Z component okay so it just needs to be form Z text all right I probably need but see if it works mmm not working what am I doing wrong here Oh name is mark this required okay so we need a name let's see if that okay does not have the validation rule is in that's odd we get that from now let's see what this is mm maybe we want to try alright let's just let's try regular expression then alright so let's go to our server Jess and let's see she I don't really want to I want to match it today's just a values truthful let's try this oops okay nobody should imagine oops all right cool let's see if we can get it to not be an error all right you know what though this isn't gonna work I guess we could do this I wish we could do this and make it work yeah yeah that's not gonna be the answer okay so let me explain I guess I haven't really been explaining what I was doing too much sorry about that so what I had done successfully was useless regular expression to check that the that the end of the string of filenames that we have here contains one of these extensions which is great that works but logically that's not really what we want to do because like you can see here as long as I put a file name at the end that does contain this you know a valid extension I can put whatever I want here so that's not gonna work so that's not what we wanted so you may have to go back to yeah we may have to go back to what we were originally working on so what I wanted yeah actually what I want to check to make sure see if it works is could I just put in true or false if I were to use this and then let's see if we can return return false let's see if we can get it to return the air okay so that returns false automatically okay returns true all right so as long as we return that from that function let me see if I can just return something just return false I can't just do that okay all right so let's just go back to this so now we should be able to just grab the our value from what we were doing up here okay so when we were doing the handle filepath we should be able to let's see if this works let's add let's add something to state I was valid now you know what we have a loop here let me see what we may need to do how's that all right sir mapping over this all right so here's what I'm gonna try to do as this gets looped through if any of the files in here don't match so if it returns false then we're gonna change it and so we're gonna save a value in state and we're gonna either basically if any of them are false then that value in state is gonna be false okay and initially yeah so initially this is going to be set to true because we don't want to show an error right off the bat so true and then we're also going to we're also going to set it let's set it to true this states all right I want to set this to true right off the bat because if the user puts files in there it's gonna get set to false but then if they do it again I wanted to set back to true and then if it checks everything it's going to keep it at true and then within within this I don't want to lock on soullow that anymore what I want to do is so if true I guess now we want to do this is so good [Music] all we want to do is take - beautiful right all right I see Lily have tears yet can I not do that when I said state you see all right so I'm getting an error now I'm trying to do formed up file valid true but I'm getting an error so I guess I'm not I guess I can't do it like that all right so I guess I can't do nested stuff like so let's go with should say okay and let's see that at least get rid of the airs ready I think that I messed something up inadvertently with my syntax let's see so excuse shouldn't have to put this let's see yeah why is it this thank you okay I'm pretty sure my timer went off yeah it did go off I hate to end on this note syntax error but yeah I'm not sure would I not sure what I did let me I'm just gonna take a minute and see if I can fix this if not probably just end the stream and do some more troubleshooting okay all right let's see all right let's see if I can then try this all right see if we get that same area no okay all right that's better it's just I guess it didn't like that I was trying to do that short circuit okay all right I guess I'm gonna go for a few more minutes you can get this working since I figured that out I don't think this is the best way to do it at least it seems like it's a lot more than should be needed but since I couldn't I couldn't set state the way that I originally tried to set state and I actually can't believe that I never had a need to do that before because I don't remember running into that problem before so I'm gonna try to do it this way which is basically the way we're doing it down here already so we know it works [Music] all right so I just want to see what what's going on with a state when we do this now just to test that what we're doing so far so we're gonna check in dev tools react and should be able to their yeah state form file Vela true okay let's try to put in something it's not true all right great so we see file valid went to false now let's cancel it good and I went to true awesome okay so that is acting how we want it so now we have in state this value that goes true or false depending on whether or not the file let's put in is valid great and that's checked against the the types that we have here okay so the next the next step then is to return whoops passed it up there we go we need to return in here in this function let's go return this is another place where I think there's got to be a better way to do this but let's see I'm not even sure if I'll be able to get the value of this here all right let's see what happens I good okay hmm let's check out forms these I'm thinking there's got to be a way to just set instead of having to use this dysfunction there's got to be a way that I can just set true/false on the validation I always I hate to just read documentation on the stream but we're so close to getting this so lol OS is it's almost two hours can we end please because yes that's give the bathroom if you got to go to the bathroom and then come back that's cool if you miss what happens you could always check the replays do I need to include bathroom breaks into the streams if they get long all right let me check quickly here if there is some way to set this see now that's not what I was looking for there's a ballot ATSC well I don't think I think I'm seeing anything validation okay maybe we can add we can add a rule let's see okay maybe this creates add validation rule is the way to go for us oh this doesn't really seem different than what we're already doing it's just extracting it out so maybe we just need to figure out I don't even really need this value value don't need this maybe the problem is trying to get this in here what if I wonder if I couldn't make this an arrow function this work we'll see I'm really not confident that this will work but the only thing I can think of is - why it's telling me that let's see what Canada syntax is that you know whoa that actually did not get me there maybe it'll work alright so let's try to upload something that should give us an error see what happens nice Oh let's cancel it out what's oh man it works let's try to try it with multiple files I don't think we tried that yet great yes without again oh yes all right okay so although I wasn't really confident in what I was doing it worked so that that was the case is that originally how this was written basically we just copy and pasted from from the docs there so that's not what exactly what we needed we needed to be able to have this be what what we wanted it to be so we had to use that error function when we did that it worked so great so half court so basically we have our validation now immediately for the file upload great probably would be cool to have a message I'm thinking like to make this better it might be cool to have the message actually say what file is the file you can't upload but for now it works I mean this is entirely functional and does the job as is but it can definitely be made better well I'm happy I got that working because us starting to think I would not get that working before the end of the stream alright so streaming a little bit longer than I that I thought okay so John B just paste it in here a possible error so the error file type xcf not supported yeah that's definitely that's that's like what that's exactly what I was thinking so yeah I think that's possible I'm not gonna try to do it right now since streams already been two hours and to be honest with you I'm just I'm really exhausted I'm I guess at the beginning I'm not really feeling well and this these dreams take a lot out of me cuz I try to at least seem like more energetic even if I don't feel energetic and that that effort alone takes a lot of energy so alright so what I'm gonna do now is I'm gonna scroll up a bit and try to see if there are any questions that I missed fire Scott says thanks for the stream you're welcome Thanks thanks for watching and being involved in the live chat so yet if you are just here for the code then and you got to go totally understand thank you so much for watching and I should be back tomorrow unless I feel even worse than today and then I might take a day off but otherwise if you have any questions please put that in the live chat now I don't think there's a ton of questions in the chat so it'll probably only take me a few minutes to get through and when I get through everything then we'll in the stream feel free to ask whatever you want if you're if you're new don't be afraid to ask something you know really any questions even if it seems really basic is totally fine with me try to be really beginner friendly in here okay I was just I was reading some comments about the person had hitted the bathroom so that's why had a little laugh there I don't think I'm gonna repeat him more yeah okay John B I just saw your comment about the right-hand braces way on the right thanks for that I didn't notice it at the time but that was definitely one of the errors that I got there so thanks for noticing that that was a good catch I didn't even notice it at first fire Scott says hey you could just move your logic with file valid inside this custom validator so you get rid of external file valid and your component will be compact okay I could check that out I'm not a hundred percent sure what that would look like right now I'd have to check with the code but thank you for the suggestion I'm definitely sure this could probably be refactored to be better usually that's how it is when I cut things on the stream I'm trying to go quickly so I don't usually even make an attempt at refactoring anything so actually that's a good disclaimer so just so you know especially if it's starting out the code that comes out during the stream is probably not like ideal all the time but usually it ends up getting better as we go on so either somebody submits a pull request and refactor it or if I get a chance I refactor it later on so the finished product is usually what you'd want to go with but I often I think the stream would be really really long it's already pretty long but it would be really long if I tried to go back and refactor everything so just kind of be aware that there's probably a better way to do a lot of the stuff that I do during the stream Oh Rory said something's going on with free code camp can't get online okay I'm not sure I haven't tried to get on a free code camp yet today and I don't have anything to do with the free code camp website or the servers so I'm sorry I can't I can't give you an update on what's going on right now I would check check the free code camp Twitter because they're usually pretty good about putting out some sort of message on Twitter as to whether if something's happening and when you can expect to get back on so I would check there hopefully there's some type of update on their Twitter I breathe bright it looks like Brian I'm not sure to pronounce that so it looks like Brian O'Driscoll says hi guys joining the party a bit late but I can catch up on videos repeats Jessie you're on a roll today Thanks yeah it was it was a struggle for a little bit but we got it working so thanks a couple feels saying I thanks thanks to the shame you're welcome thank you so much for being and watching Umberto's says I definitely understand using so much energy during the stream I finished recording my first official video last night 1.5 hours of recording and found that the screen capture didn't oh no this is Ola I recorded a silent version of the work I did that thinking I'm gonna do a voiceover okay well that's cool man that that stinks when you record stuff in a doesn't work I am a few weeks ago I was trying to record a tutorial video for a client and it was really late and I was like yes I'm finally gonna get this done it's the last thing I have to do for this client and then I checked and I had my settings way off and the video quality was just so terrible you couldn't even read anything and I still haven't recorded it I was just like so let down by that eyes and I haven't really had time to get back to it alright so it looks like one more question so Alexander asks what's the purpose of the use folder so it's probably hard to see cuz it's so small over here but in my project I have things separated out so I have a Styles folder a components folder and I have this views folder the purpose of the views folder is basically that each component in the views folder acts like a page in the in the actual so you can see the names of each of the views components corresponds to the name of a page so this is the service request components we have a home component I think we have a home component a logo is component so so that's what the the views that used to so each component of the use filter is a different a different view so hopefully that makes sense you certainly don't have to organize it like that I just I just do and I was kind of used to it from when I use next j/s each you know they did their routing based on the components so I guess I kind of carried that over from the last project I did using next of having a component for each each for you separate it out you know okay all right well it's a white knife says hi hey how's it going thanks for watching okay awesome uh-huh I got the name right from earlier well I got it right the first time so it's Bree and then I think that we're saying all right I'm definitely gonna I'm gonna end things now I'm getting really tired so thank you so much for watching I'll be like I said I'll be back hopefully I'm feeling better tomorrow and I'll be back I'll be back into work and I could do hopefully be a little bit more with it during the stream but took a while in the end we did get it get working what we wanted to get working so we do have form validation on on everything we need to on our form including the the upload the file uploader so so it's looking pretty we're pretty close to having to having this finished up at least finished up enough to get some feedback on and make some changes before we actually launch this thing so I just got two more questions let me do this real quick since I got two more questions here so zachary says hey could you make a discord jst toriel series I don't really know anything about it so if I learn about it then I could definitely do to Touro serious I guess but right now I don't I don't know enough to be comfortable to learn the tutorial and rich-rich bob bob says sorry I'm getting that wrong I'm pretty sure I get that name wrong but says why is Ubuntu better than Windows I don't I don't really I don't really think I'm I can give you a great answer for that there's so many factors that go into choosing an operating system if you're thinking about it for an OS for like a desktop OS potentially it could be for servers as well they windows server but right off the bat Ubuntu is free so that's one reason that I would think it's better but it totally depends on what you're trying to use them for as to whether or not one would be better the other so anyway sorry I couldn't give you a better answer for that but I think that would be a better question to kind of debate and get some more feedback on but right now we can't have the debate so maybe ask that question again towards the beginning of the stream and I'm sure you'll get a lot of answers from everybody in the live chat all right so this time for real I'm going to end the screen even if I get more questions I'm going to end it thank you so much for watching and have a great day