All right.
And before we set up an action in the profile page, let's recall the update user request.
So the URL is forward slash users, forward slash update user, and the method is patch.
And essentially, this is what we want to send to the server.
Now, keep in mind one thing since we'll be sending form data.
When we send from the front end, it's not going to work.
So we still need to add few additional things on the server just so we can process this data.
So don't be surprised.
Once we set up everything in the action, it's not going to work.
So yes, the main idea is going to stay the same as far as this request.
But since we'll be sending form data, we need to install a specific package which will allow us to
nicely.
Access all of the data.
So let's navigate back to the Readme.
As far as the action in this case, we only want to grab the form data.
So again, we're not looking for Json.
I will set up a check on the front end to make sure that we're not passing in the file that's bigger
than, again, 0.5MB.
And if that's the case, I'll just say toast and return.
And right after that we're going to have try and catch.
We'll go with custom fetch Patch.
We're looking for users and then update user.
Like I said, we're passing in the form data.
If we're successful, we'll just say profile updated successfully and if there's an error, we'll display
the error.
Now at the very end we'll return null.
And if you're wondering, well, how are we going to update the inputs in the profile page, Well,
remember, every time we make a request, right after that, we make the current user request where
we get info on that user and in there we'll have the new values.
And since we already have the default values set up in the return, that's how we will display the latest
value.
So let's get cracking.
We want to navigate to again profile.
Let's set up the action right above.
So we're going to go here with export const action.
It's going to be a sink.
So that doesn't change.
And before I set up the function body, let me right away grab it in the app.
Let me go up.
This is going to be a profile action.
And I also want to rename it over here.
And then as far as the pages.
We're looking for a profile one.
Let's scroll down.
Let's look for the profile page.
We have action and that one is equal to our.
Profile action.
Let's save it.
And back in a profile.
Let's start working on the functionality.
For starters, we want to access the request since that's where the form data is located.
And let's set it equal to a variable.
So formdata is equal to await then request.
And then we want to invoke the form data.
Now the form data interface has this method of get where we can provide which input value we want to
access.
And in our case that is Avatar.
So essentially I'm going to go here with file and I'll set it equal to form.
Data get.
So that's a special method that we get on the interface and we just need to provide the correct name
of the input.
Now, why do we do this check?
Well, because keep in mind, we don't always have to provide the image.
If let's say I just want to change the name, I don't have to select a file over here.
So effectively I just want to check whether the file is present.
And if that's the case, well, then we'll check for the size as well.
And as far as the condition I'm going to go with, if file exists, then check for the size as well.
So file dot size.
And we want to make sure that it's bigger than 0.5MB.
And in that case, we need to provide here five zeros, I believe.
And if it's bigger, then of course, let's run toast.
Then let's provide some kind of message image size to large.
And then also let's return null.
Remember, we always, always want to return something from the action.
And this condition is no exception.
So if it's too big, then we return null.
Now, if it's not too big, then we want to make the request.
Let's go with await then custom fetch dot patch.
And then we want to go with users, then forward slash and then update.
iPhone User root.
And we want to go with form data.
Then if we're successful, we want to go here with toast and success and we want to provide some kind
of message.
So in my case, I'm going to go with profile updated successfully.
And then as far as the catch, we want to go with error.
And you know what?
Again, this is going to be the case where I will speed this up a little bit.
I'm just going to look for edit, for example, and grab this over here and we don't need to return
an error because regardless whether we're successful or not.
I just want to turn now and now let's navigate back to the browser.
Like I said, yes, the request is going to fail, but I still want to showcase a few things.
So for starters, you can pick the image, you can skip it.
That part is totally irrelevant.
You can change the name, for example, to peer.
Now let's make a request and check it out.
We'll get 400.
Like I said, since we're not able to process the values in the form data, essentially the server sends
back.
Hey, listen, there is no name.
There is no email because remember, we already set up the validation layer, correct.
So for starters, let's take a look at the request.
So this is the URL, It's a patch method.
Then let's keep on scrolling.
And somewhere over here, notice this content type.
In this case it's multipart form data.
So that's what we're sending.
And essentially, if we take a look at the payload notice, the avatar is binary and essentially that's
why we need to do these acrobatics.
Now, if I'm going to go to, for example, job and again, let's look for front end and then Apple.
Of course, you'll notice this payload over here.
So again, this is the difference when we're sending a file.
And up next, we want to set up the functionality on the server so we can process this data as well.