In this video.
Let's finish up with the updating the user profile image.
So let's look at the controller for updating user profile.
So we insert user.
Let me collapse the password update and let me locate, update or upload profile image, which is this.
So by default, like I said, EXPRESS doesn't support file upload.
So if you cancel that log rec dot file, you're going to have undefined or empty response.
So let's make a request to this controller and that is the upload profile photo.
So inside the client, let's scroll down and these are going to be profile image upload.
So let me hit send.
Now I got some beautiful error, meaning that our server is not running, so let me run the server as
NPM run server.
All right.
So let me make the request again and let me check the terminal.
And you can see we have undefined.
This is where Morta comes into play.
So any route where we want to accept file, we are going to pass mortar as a major word.
So any route where I want to have access to the file that I'm uploading, I'm going to pass mortar as
a major word.
But before we get into that, let's see how we can upload file using this tool.
So click on form.
And here, let me reduce the window.
And here you can see that we have a field called files.
So our click on that.
And here we have this property called Field Name.
And then the file the field name is a variable that we pass in into motor, and I'll show you as you
move on.
For the meantime, let's add what is called profile, and let's select the image that we want to upload.
So I'm going to upload this image.
So let me hit send.
And let me check the terminal.
And again, we have undefined.
So how can we have access to the file that we are uploading?
This is where more comes in.
So let's get back to the user route.
That's where I want to pass more to.
So users and users route.
And first step is let's require the storage from cloud energy, the one that we configured.
Let me save the file so that I can have the auto import config and then cloud.
NARRATOR And as that.
So let me come back to the user's route and make use of storage.
And I have the auto import, which is this one.
So now I have the configured cloud, Nari.
The next step is that I need to require the motor.
So up here I'm going to make use of const.
Motor is equal to required the motor package.
The next step is I'm going to create instance of motor going to be as instance of motor and going to
be as const.
Upload.
Equal to the mortar as a function call and the object.
And for this we are going to pass in the storage from the cloud configuration, the one we did in the
previous video.
So with this one, I'm going to pass this one as a murderer to any route where I want to accept, file
upload.
So let's locate the update or upload to file folder, which is this.
So here are going to be us upload.
And for this one we have a method called single.
If you want to accept a single file upload, we are going to use single.
If we want to upload multiple images, I'm going to use what is called array.
So make use of single and as a function call.
And here we provide the filename name as we saw when we are updating.
So let me reduce the window here and this is what I'm referring to.
The variable we are passing into more time must be the same name as this.
So I'm going to make use of profile here.
And then comma and this controller or this route needs to be protected.
So unless you are logged in before you can update your profile photo.
So I'll bring in the protected middle word as that.
So let's get back to the upload and first step is that we need to look in first.
So let me come back here and then the log in.
Now I've looked in.
Let me go ahead and then upload.
Now let me check the terminal.
And we have beautiful response, meaning that our file has been uploaded to cloud and cloud.
Nary has given us this URL of which we can reference.
So if I copy this URL and open using my browser here, let's see the image.
And this is an image I just uploaded.
So the next step is that we are going to save this one into our database, meaning we are going to update
the user profile image field with this one.
So let's go ahead and then implement the logic.
So let's get back to the controller.
So let me collapse the opening tabs and let's get back to the user controller, which is this.
So let's have the roadmap.
Remember, we have the image uploaded on the file dot path as you saw in the console.
So before we can do that, let's look at the roadmap first.
First step is that we're going to find the user to be updated.
So the comment goes like this and we have the log in user ID and our regular session dot user off.
We're going to be as const, User ID is equal to rec dot session, dot user off.
So next step is that let's find the user going to be const.
User found is equal to a weight and user defined by ID.
And the ID is from the user ID as that.
The next step is that we are going to check if user is not found.
So we're going to be as if user is not found.
It's going to be as if there is no user found, then we are going to throw an error.
So we need to pass in next here and again to return from here as next, then pass in the app error and
then the message as user not found, then the status code provide four or three.
The next step is we are going to update the user profile photo and going to be as await and then the
user model dart fine by ID.
And update the ID can be found and user ID and the field I want to update is going to be let me locate
the field.
Well, so model users and then the user model.
And this is a field called profile image.
So let me copy that then paste it here.
And I want to update this field using the image we uploaded into Cloudera and can be found on that rec
dot file dot path as you saw in the console.
All right.
The next step is that let's pass in the new attribute here to true to have the newly updated data.
The last step is that I'm going to send a message by saying that you have successfully updated your
profile image so going to be as this.
And let me change this one to data.
Right.
And for the error I'm going to call it next.
So we're going to be next here and I'll pass in the app error and then the message as error dot message.
All right.
So let me remove this one.
So moment of truth.
Let's go ahead and take the endpoint.
And again, I'm going to have the ID of the user inside the session, so I'm going to remove the dynamic
ID.
So let's get back to the users root here and I'm going to remove the ID for file upload.
Likewise the request handler.
Let's remove the idea here and hit send.
And you can see we have the profile image being updated.
If I go to my profile and point and here you can see also we have the profile image being updated.
What has left is allowing the user to update the cover image.
The concept is the same.
All right.
So let's get into that in the next video.