We were just able to verify that our validation was working.
But the error messages that we have right now around title and price aren't that great.
So let's very quickly just go to our validators file.
Here it is right here.
I'm going to find required title and require price.
And remember to customize an error message.
We can chain on a dot with message call.
So I'm going to do that.
In both cases, I'm going to find the comma that separates these two key value pairs.
I'll then chain on a with message and for title I'll say must be between five and 40 characters.
And for the price.
I will also cheat on a with message.
And say must be a number greater than one.
Okay, so let's save this.
I'm not going to do a full test of this.
Instead, I'm just going to refresh the form and make sure that everything still appears.
If you just made a typo, then you're going to see some error message, something that says, hey,
cannot connect to server.
And so if you see an error message, go back over to your terminal, you'll see a reason of exactly
what went wrong.
Chances are, obviously, it's going to be a typo related to that validator such as file.
Okay.
So now in this video, what I really want to focus in is the image upload right here.
So we've got something that we can click on that says Choose File.
And then presumably inside of here we can select some file to include with the form.
So the first thing I want to focus on is just how do we actually access that image?
How do we on our server write some code that says, okay, take the image that the user just uploaded
and save it somewhere, or do something with it.
To get a better idea of how to work with that image, I first want to try to access it in the same way
that we access other properties contained inside of our form.
So usually to access other properties inside of our form, we can find our post request handler.
I'm going to delete the console log right here of errors and I will replace it with a console log of
wrecked body.
Remember, that's where we usually get information from our form from.
So let's just console.log that out and see.
Well what got uploaded in place.
That image.
So I'm going to save this file.
I'll go back over to my form.
I'm going to add in some title here.
Like a product.
I'll make sure I put in a valid price as well.
And I'll hit Choose File and I'm going to upload a image of a coat.
Now, obviously, I sat down ahead of time, got an image of a coat to actually upload.
So at this point you don't actually need an image of an actual product.
You just need an image to upload.
It can be any type of image.
So a JPEG, a PNG, even a bitmap, it's totally up to you.
All you need is an image, so hopefully you can find a image on your computer right now.
If you can't, you can always hop over to Google Image Search and search for coat.
Then go to images.
And just download one of the images that you see on this page right here.
So some coat and you'll actually notice that the code I used is, was it not on here?
Well, it was on here just a moment ago.
So whatever.
All we need right now is an image of something.
So I'm going to take that image, throw it into that file picker.
And I'll hit submit.
Okay.
So let's now go over to our terminal and see what got console logged out.
So back over here.
I can see.
Okay, I got the title The Price.
And for that image property, all I have is the name of the file that I just uploaded I don't have anything
about.
Well, actually the image itself.
I don't have any image data.
I just have the name.
So that doesn't really appear to be that useful.
Another way that we can try to inspect the request that we're making is to go back over to our network
request tab inside the browser and take a look at the request was issued when we submitted our form.
If you don't have your network request tab open, then make sure you open it up.
Go back to the form, enter in a title and a price and reattach that image and then hit submit again.
And we should see the post request that is being made to our back end.
So there it is right there.
A click on it.
I'll take a look at headers and if I scroll down to the bottom, I'll see all the form data that was
included.
So it's clear at this point by looking at this right here that when we submit a form or a default form
that has an image attached to it, all that is getting communicated from our browser over to the server
is this image property that has the name of the image, which is definitely, definitely not useful
at all.
So it's clear that the default behavior of a firm is not really doing what we want.
So let's take a quick pause right here.
When we come back, the next video, we're going to get a better idea of how we can actually take a
file that has been attached to a form and submit it and receive it on our back end server.