Okay, so we have our upload route with our Multer middleware.
Now we want to go to the front end and as usual, we're going to start in slices.
And let's go to our products API slice and we're going to add right under update product.
Let's say upload.
We'll say upload product image, which is going to be a mutation.
And let's specify query with data and then the URL, which is going to be the product URL.
So actually, you know, what do we have?
Do we have a constant for this?
We don't.
So we could just add let's do that.
Let's say export.
Const uploads, URL or upload URL and then we'll bring that in.
Right here.
Let's say upload.
Upload URL and then we should be able to just set this directly to the upload URL and the method is
going to be post body.
We're going to pass the data and that should do it.
We can close that up.
Okay.
And then we just want to export this.
So let's come down here and say use.
The upload product image mutation.
And we can close that up and we're going to open up our product edit screen and bring in our new mutation.
So use.
Product.
What was it called?
Use product upload.
I'll use upload product, image mutation, and then to use that, let's go right here and say const
square brackets.
And we want the, the actual action which will be called upload.
Product image.
And then let's also get the is loading.
But we're going to rename that to, let's say, loading upload.
Okay.
And then we need the actual input.
So right here where we have our placeholder, we're going to replace that.
And let's create a form group with the control ID of image and we'll end that.
And we're actually going to have two inputs in here.
One is just is going to be the URL of the image and then one will be the actual the choose file button,
the actual file input.
So let's do a form label here.
Why is that not printing?
Form label of image.
And then underneath that, we'll have our form control.
I don't know why this is doing this.
You just have to do it the old fashioned way.
So form control and then that's going to have some some props in it.
So we want the type this is going to be text.
Because again, this is just the the URL.
So placeholder, we'll say image or let's say enter image URL and then we'll have the value, which
is going to be image from our state.
And we want an on change.
And the on change is just going to call.
It's going to be a function pass in our event.
And then it's just going to call set image.
Okay, so that's just for the URL.
Now the actual image is going to go underneath that and we're going to use I guess we could do form
file, but I'm just going to stick to form control.
So let's say form dot control.
And as far as what we want for the field are the attributes or props.
We want the type of file this time.
So type file and label, we'll say choose file and then we'll have our on change.
And that's going to call a handler that we're going to create above.
So let's call this, we'll say upload file handler.
All right.
So we're going to get an error saying we don't have our upload file handler, so let's just create that.
So const upload file handler and and for now I'm just going to console log just to show you what we
get.
And I'm sure a lot of you already know this, but this takes in an event object.
And on that event object we have target dot files, which is an array.
But since we're only uploading a single file, we're just going to choose the first item in that array.
So we'll go ahead and try this out.
And you can see we just have images slash mouse in here because that's the that's what we have in the
database.
But let's choose file and I have this headphones PNG, so make sure you try it with a PNG or Jpeg.
And now if I open my console up it's not going to get uploaded.
Nothing happens yet because we're just doing a console log, but you can see the information we get,
we get the file name, the size, the type, the last modified and so on.
Okay, so what we're going to need to do is create a new form data object.
So let's say const form data and set that to new form data and then we want to append.
So I'm going to replace this console log here with form data, dot append, and I want to append an
image or call this image.
So the first argument is going to be image as a string, and the second will be the actual image object.
And then underneath that we're going to do a try catch.
And in the try we're going to get our response from our upload product image.
Now we just want to add on to this unwrap because it does return a promise and we want to extract that
and then we'll just have a success.
We'll say toast, toast, dot success.
And.
I think we get.
Yeah, we should get a message.
So.
Dot message.
Because remember when we when we created our route that used the Multer middleware, we had a message
that said whatever image uploaded successfully.
And then we just want to set image.
So basically the component state of the image URL, we want to set that to res dot image because remember
we also sent the, the image path back in a property called image.
And then we'll just do toast dot error.
And change this to RR.
And say e rr dot data dot message or.
And this would be error.
Error.
Okay, so now we can try it out.
So I'm going to come back over to this page.
I'm just going to reload it and I don't want to change the mouse image.
I want to change my test product.
So I'm going to click edit for that, Choose file, choose my headphone image and image uploaded.
Okay, so it all happens just here.
I don't even have to click update for it to upload.
But in order for this to get saved to the database, I do have to click update.
So now if I go to the front page here, you can see that that image has now been updated.
All right.
So we are getting there.
The next thing that I want to be able to do is delete products.
So we'll move on to that in the next video.