1 00:00:00,450 --> 00:00:01,530 In this video. 2 00:00:01,530 --> 00:00:06,300 Let's finish up with the updating the user profile image. 3 00:00:06,420 --> 00:00:11,970 So let's look at the controller for updating user profile. 4 00:00:11,970 --> 00:00:13,330 So we insert user. 5 00:00:13,860 --> 00:00:21,780 Let me collapse the password update and let me locate, update or upload profile image, which is this. 6 00:00:21,960 --> 00:00:27,050 So by default, like I said, EXPRESS doesn't support file upload. 7 00:00:27,060 --> 00:00:35,640 So if you cancel that log rec dot file, you're going to have undefined or empty response. 8 00:00:35,730 --> 00:00:40,950 So let's make a request to this controller and that is the upload profile photo. 9 00:00:40,980 --> 00:00:47,670 So inside the client, let's scroll down and these are going to be profile image upload. 10 00:00:48,000 --> 00:00:49,410 So let me hit send. 11 00:00:49,410 --> 00:00:57,180 Now I got some beautiful error, meaning that our server is not running, so let me run the server as 12 00:00:57,180 --> 00:00:59,250 NPM run server. 13 00:01:00,540 --> 00:01:00,930 All right. 14 00:01:00,930 --> 00:01:05,430 So let me make the request again and let me check the terminal. 15 00:01:05,550 --> 00:01:08,580 And you can see we have undefined. 16 00:01:08,610 --> 00:01:12,090 This is where Morta comes into play. 17 00:01:12,150 --> 00:01:20,010 So any route where we want to accept file, we are going to pass mortar as a major word. 18 00:01:20,400 --> 00:01:27,540 So any route where I want to have access to the file that I'm uploading, I'm going to pass mortar as 19 00:01:27,540 --> 00:01:28,620 a major word. 20 00:01:28,680 --> 00:01:33,900 But before we get into that, let's see how we can upload file using this tool. 21 00:01:34,110 --> 00:01:36,060 So click on form. 22 00:01:36,060 --> 00:01:39,290 And here, let me reduce the window. 23 00:01:39,300 --> 00:01:43,320 And here you can see that we have a field called files. 24 00:01:43,320 --> 00:01:45,290 So our click on that. 25 00:01:45,300 --> 00:01:49,350 And here we have this property called Field Name. 26 00:01:49,350 --> 00:01:56,430 And then the file the field name is a variable that we pass in into motor, and I'll show you as you 27 00:01:56,430 --> 00:01:57,000 move on. 28 00:01:57,000 --> 00:02:04,800 For the meantime, let's add what is called profile, and let's select the image that we want to upload. 29 00:02:04,800 --> 00:02:07,830 So I'm going to upload this image. 30 00:02:08,340 --> 00:02:10,169 So let me hit send. 31 00:02:11,600 --> 00:02:14,170 And let me check the terminal. 32 00:02:14,180 --> 00:02:16,900 And again, we have undefined. 33 00:02:16,910 --> 00:02:21,230 So how can we have access to the file that we are uploading? 34 00:02:21,410 --> 00:02:23,890 This is where more comes in. 35 00:02:23,900 --> 00:02:27,660 So let's get back to the user route. 36 00:02:27,680 --> 00:02:30,260 That's where I want to pass more to. 37 00:02:30,260 --> 00:02:32,660 So users and users route. 38 00:02:32,750 --> 00:02:40,130 And first step is let's require the storage from cloud energy, the one that we configured. 39 00:02:40,550 --> 00:02:46,880 Let me save the file so that I can have the auto import config and then cloud. 40 00:02:46,880 --> 00:02:48,710 NARRATOR And as that. 41 00:02:48,710 --> 00:02:54,350 So let me come back to the user's route and make use of storage. 42 00:02:54,590 --> 00:02:59,240 And I have the auto import, which is this one. 43 00:02:59,630 --> 00:03:02,960 So now I have the configured cloud, Nari. 44 00:03:02,990 --> 00:03:07,770 The next step is that I need to require the motor. 45 00:03:07,790 --> 00:03:11,030 So up here I'm going to make use of const. 46 00:03:11,450 --> 00:03:17,180 Motor is equal to required the motor package. 47 00:03:17,540 --> 00:03:27,320 The next step is I'm going to create instance of motor going to be as instance of motor and going to 48 00:03:27,320 --> 00:03:28,940 be as const. 49 00:03:30,070 --> 00:03:31,060 Upload. 50 00:03:32,760 --> 00:03:37,860 Equal to the mortar as a function call and the object. 51 00:03:37,860 --> 00:03:44,790 And for this we are going to pass in the storage from the cloud configuration, the one we did in the 52 00:03:44,790 --> 00:03:45,750 previous video. 53 00:03:45,750 --> 00:03:52,320 So with this one, I'm going to pass this one as a murderer to any route where I want to accept, file 54 00:03:52,320 --> 00:03:53,070 upload. 55 00:03:53,070 --> 00:03:58,620 So let's locate the update or upload to file folder, which is this. 56 00:03:58,620 --> 00:04:02,040 So here are going to be us upload. 57 00:04:03,190 --> 00:04:07,490 And for this one we have a method called single. 58 00:04:07,510 --> 00:04:12,100 If you want to accept a single file upload, we are going to use single. 59 00:04:12,130 --> 00:04:16,839 If we want to upload multiple images, I'm going to use what is called array. 60 00:04:16,839 --> 00:04:20,019 So make use of single and as a function call. 61 00:04:20,019 --> 00:04:25,750 And here we provide the filename name as we saw when we are updating. 62 00:04:25,750 --> 00:04:30,700 So let me reduce the window here and this is what I'm referring to. 63 00:04:30,940 --> 00:04:35,600 The variable we are passing into more time must be the same name as this. 64 00:04:35,650 --> 00:04:39,460 So I'm going to make use of profile here. 65 00:04:40,670 --> 00:04:46,370 And then comma and this controller or this route needs to be protected. 66 00:04:46,460 --> 00:04:51,060 So unless you are logged in before you can update your profile photo. 67 00:04:51,080 --> 00:04:55,390 So I'll bring in the protected middle word as that. 68 00:04:55,400 --> 00:05:01,960 So let's get back to the upload and first step is that we need to look in first. 69 00:05:01,970 --> 00:05:05,720 So let me come back here and then the log in. 70 00:05:07,410 --> 00:05:09,000 Now I've looked in. 71 00:05:09,000 --> 00:05:11,280 Let me go ahead and then upload. 72 00:05:11,920 --> 00:05:14,230 Now let me check the terminal. 73 00:05:14,560 --> 00:05:21,610 And we have beautiful response, meaning that our file has been uploaded to cloud and cloud. 74 00:05:21,610 --> 00:05:26,070 Nary has given us this URL of which we can reference. 75 00:05:26,080 --> 00:05:33,160 So if I copy this URL and open using my browser here, let's see the image. 76 00:05:34,370 --> 00:05:37,730 And this is an image I just uploaded. 77 00:05:37,880 --> 00:05:45,410 So the next step is that we are going to save this one into our database, meaning we are going to update 78 00:05:45,410 --> 00:05:48,980 the user profile image field with this one. 79 00:05:48,980 --> 00:05:51,950 So let's go ahead and then implement the logic. 80 00:05:51,950 --> 00:05:53,660 So let's get back to the controller. 81 00:05:53,660 --> 00:06:01,340 So let me collapse the opening tabs and let's get back to the user controller, which is this. 82 00:06:01,700 --> 00:06:03,770 So let's have the roadmap. 83 00:06:03,770 --> 00:06:10,850 Remember, we have the image uploaded on the file dot path as you saw in the console. 84 00:06:10,970 --> 00:06:14,930 So before we can do that, let's look at the roadmap first. 85 00:06:14,930 --> 00:06:19,460 First step is that we're going to find the user to be updated. 86 00:06:19,460 --> 00:06:27,680 So the comment goes like this and we have the log in user ID and our regular session dot user off. 87 00:06:27,680 --> 00:06:37,670 We're going to be as const, User ID is equal to rec dot session, dot user off. 88 00:06:38,510 --> 00:06:43,100 So next step is that let's find the user going to be const. 89 00:06:43,130 --> 00:06:53,180 User found is equal to a weight and user defined by ID. 90 00:06:54,440 --> 00:06:59,000 And the ID is from the user ID as that. 91 00:06:59,210 --> 00:07:04,090 The next step is that we are going to check if user is not found. 92 00:07:04,100 --> 00:07:06,890 So we're going to be as if user is not found. 93 00:07:06,890 --> 00:07:13,160 It's going to be as if there is no user found, then we are going to throw an error. 94 00:07:13,160 --> 00:07:22,940 So we need to pass in next here and again to return from here as next, then pass in the app error and 95 00:07:22,940 --> 00:07:31,190 then the message as user not found, then the status code provide four or three. 96 00:07:31,950 --> 00:07:39,690 The next step is we are going to update the user profile photo and going to be as await and then the 97 00:07:39,690 --> 00:07:44,940 user model dart fine by ID. 98 00:07:46,640 --> 00:07:56,900 And update the ID can be found and user ID and the field I want to update is going to be let me locate 99 00:07:56,900 --> 00:07:57,560 the field. 100 00:07:57,560 --> 00:08:01,430 Well, so model users and then the user model. 101 00:08:01,460 --> 00:08:04,460 And this is a field called profile image. 102 00:08:04,460 --> 00:08:07,880 So let me copy that then paste it here. 103 00:08:08,120 --> 00:08:16,050 And I want to update this field using the image we uploaded into Cloudera and can be found on that rec 104 00:08:16,100 --> 00:08:21,620 dot file dot path as you saw in the console. 105 00:08:22,370 --> 00:08:23,240 All right. 106 00:08:23,240 --> 00:08:32,179 The next step is that let's pass in the new attribute here to true to have the newly updated data. 107 00:08:32,570 --> 00:08:39,710 The last step is that I'm going to send a message by saying that you have successfully updated your 108 00:08:39,710 --> 00:08:43,640 profile image so going to be as this. 109 00:08:44,900 --> 00:08:47,660 And let me change this one to data. 110 00:08:48,680 --> 00:08:49,100 Right. 111 00:08:49,100 --> 00:08:52,240 And for the error I'm going to call it next. 112 00:08:52,250 --> 00:09:00,650 So we're going to be next here and I'll pass in the app error and then the message as error dot message. 113 00:09:01,340 --> 00:09:01,790 All right. 114 00:09:01,790 --> 00:09:03,350 So let me remove this one. 115 00:09:03,780 --> 00:09:05,280 So moment of truth. 116 00:09:05,300 --> 00:09:07,850 Let's go ahead and take the endpoint. 117 00:09:07,850 --> 00:09:14,630 And again, I'm going to have the ID of the user inside the session, so I'm going to remove the dynamic 118 00:09:14,630 --> 00:09:15,320 ID. 119 00:09:15,350 --> 00:09:22,700 So let's get back to the users root here and I'm going to remove the ID for file upload. 120 00:09:23,760 --> 00:09:26,090 Likewise the request handler. 121 00:09:28,680 --> 00:09:32,400 Let's remove the idea here and hit send. 122 00:09:33,100 --> 00:09:38,440 And you can see we have the profile image being updated. 123 00:09:38,560 --> 00:09:47,740 If I go to my profile and point and here you can see also we have the profile image being updated. 124 00:09:48,100 --> 00:09:53,150 What has left is allowing the user to update the cover image. 125 00:09:53,170 --> 00:09:54,850 The concept is the same. 126 00:09:54,880 --> 00:09:55,270 All right. 127 00:09:55,270 --> 00:09:57,700 So let's get into that in the next video.