All right.
And when it comes to profile page, we want to start with some imports.
Of course, it's just going to be a bunch of inputs and therefore we'll need a form row.
We'll also need a wrapper.
Remember the dashboard form page use outlet context because I want to access the user because please
keep in mind when it comes to a profile page, of course we will reuse the existing values.
Since I want to update the user's name, it kind of makes sense to have the current name correct displayed
in the input.
Then we'll also use use navigation because we want to set up the is submitting functionality.
We want to, of course, grab the form component since there's going to be an action, a custom fetch,
which of course is going to point back to our server as well as the toast.
So of course we'll use this one to display some nice toast messages.
Then as far as the functionality, like I said, we'll grab the user more specifically.
I'll grab these properties over here.
And we'll also set up the is submitting variable and then we'll set up a form.
Now at the moment we're not going to worry about the file input, so this one will cover at the very
end of the video.
And here, notice it's pretty straightforward.
Again, we go with form row.
We provide the type, we provide the name and yes, they need to match.
And of course, this is the case where I will use that default value.
And this is where I'll pass the properties from my user object.
So I'll pass your name, last name, as well as the email and location.
Hopefully that is clear.
And also we'll set up the submit button and then at the very end we'll discuss how to set up properly
the file input.
So let's start working on that again.
There are quite a few steps, so just bear with me.
For starters, let me save some time by grabbing these imports.
Let's navigate to profile JS That's the page we're looking for copy and paste.
And essentially let's start by grabbing the user.
So const user and how do I know it's there?
Well, because I'm passing it down from dashboard layout page, correct.
So use outlet context.
We want to invoke that.
Then we want to go with const name, then comma, last name, then comma, email, then location.
And all of these properties, of course, are located in my user object.
Then let's quickly set up that navigation and is submitting.
And you know what?
I think I'll just cheat a little bit.
I'll go to edit job.
I'm pretty sure it's over here as well.
So let me take this one.
Let me add it in the profile and pretty much let's start working on the return.
So we want to go here with the wrapper.
Okay, beautiful then.
We want to set up a form.
Now a method will be post because again, we'll be sending a batch request.
Then class name will be form and eventually there's going to be encryption type.
Not for now.
Let's not worry about it.
Let's start with a heading for inside of it.
We'll add a class name here.
We'll say form title and then we want to go with profile.
Let's save that.
Then let's set up the form center.
So this is where we'll place all of our inputs.
So let's start with the form center.
Then let me add a comment.
So this will be file input.
And then right after that, let's go one by one and add those four roles.
So first one will be.
Name.
So type is equal to text and the name is equal to name.
And then as far as the default value.
Well, I want to use the name my user's name more precisely.
Then let's copy and paste.
We have three more.
Second one is going to be type text.
That doesn't change.
Name is actually going to be equal to a last name.
And then let's also add that label text.
And let's say last name.
Then default value.
You can probably already guess.
It's going to be last name here.
And then we want to do the same thing for email and location.
Now for email, of course, type will be email.
You know what?
Let me select both of these over here and type it as email.
And then last one will be location.
So type is text.
But these two are going to be equal to location.
And when it comes to file input, I'll actually set up everything from scratch, meaning I'll hardcode
the label, the input and a div here in the profile.
Since there are a few things that I want to add to this particular input and it's only going to be in
this page.
So there's really no need to set up a separate component or run back to form row and start adding some
conditional statements.
So for now, let me just go with form row.
Remember, that's the div where we place both the label as well as the input.
Let's start with label HTML for it's going to be image since that's what we're going to be essentially
setting up.
And you know what?
Let me actually go with Avatar.
My bad.
The ID and name is going to be Avatar.
So instead of image, it's going to be Avatar.
Then let's add a class name.
Let's set it as form label and I'll right away provide the info that we're only accepting images that
are less than 0.5MB.
So I'll right here select an image.
And then I'll say max 0.5 and B, then let's start working on the input.
And essentially the type is not going to be equal to text.
It's going to be equal to a file, then ID will be equal to Avatar, since again, they need to match
the name will be Avatar since that's what we're going to be sending to a server.
So let's go here with Avatar then class name will do the same thing.
We'll say form input as far as the styles.
And then lastly, we can also this accept attribute.
And essentially in here I'll just say that, you know what, I'm only going to look for specific type
of files and in my case it's going to be image files.
Now one last thing.
If we want to send the file to the server, we're not going to be sending it as Json.
We'll actually send it as our form data.
So if you remember previously, we were always, always turning into a Json, correct?
This is not going to be the case.
So in the following video we will set up an action.
And yes, we'll send the data to the server, but notice I'll grab the form data and I'll send it directly
to the server as a form data.
This is very, very important.
Otherwise the functionality is not going to work.
So we're not going to send our image as Json.
No, we'll actually have to send it the entire form data.
Now, in order for this to work, we do need to go back to our form.
Again, this is a good old HTML form at the end of the day and we need to add this encryption type.
And as far as the value you want to go here with multipart.
Then forward slash and form data.
Again, this is super, super important.
If there were no file, then yes, just like previously we would just set it up as Json and we're good
to go, but since we're sending a file to the server.
It's very important to set up the encryption type.
And when we'll send the data to the server, we're going to send it as form data, not as Json.
Hopefully that is clear and I'm noticing that I'm not using is submitting.
And of course the reason for that is because I got too carried away with the file input and I forgot
about the submit button.
So let me navigate to my div and right after the last form row, we want to go here with button.
Let's add some classes, BTN, btn, block and form hyphen btn.
Then the type will be submit.
And also we're going to go with disabled and let's set it equal to is submitting.
And as far as the text, same deal we want to go with is submitting.
We want to check.
Let's add.
The text if we're submitting.
And then also we're going to have the submit if it's not the case.
So submit over here.
And with this in place, let's navigate to the browser.
Again, this is complete project.
This is what we should see.
So we have few inputs and then one of them is the file input.
In order to choose the file, we just click over here and notice this is my desktop and at the moment
I have these two images and of course eventually we'll set up the functionality where we will be able
to choose the file, send it to a server and if everything is correct, we'll update right away this
avatar here in the logout button.