1
00:00:00,020 --> 00:00:00,350
All right.

2
00:00:00,350 --> 00:00:06,140
And once we have the pack in place now let's complete the update user functionality.

3
00:00:06,230 --> 00:00:12,410
And actually the first thing that I want to do is to remove this image, the Avatar one, since we need

4
00:00:12,410 --> 00:00:19,640
to keep in mind that we will be uploading all of the images to a cloudinary anyway, so there's really

5
00:00:19,640 --> 00:00:21,530
no point to keep them around.

6
00:00:21,530 --> 00:00:24,980
And essentially in the controller we'll have the functionality.

7
00:00:25,010 --> 00:00:32,390
Once we upload the image successfully to Cloudinary, essentially we will remove that temporary image.

8
00:00:32,720 --> 00:00:38,090
And since I want to showcase that, of course I want to start from the scratch, then let's navigate

9
00:00:38,090 --> 00:00:40,880
to the user controller.

10
00:00:41,120 --> 00:00:44,510
And more specifically, we're looking for update user.

11
00:00:44,660 --> 00:00:51,980
Remember, there is a req file every time we upload the image and of course we'll use some of those

12
00:00:51,980 --> 00:00:54,050
values from the object.

13
00:00:54,080 --> 00:00:58,970
Now before we write any lines of code, I also want to set up two imports.

14
00:00:59,070 --> 00:01:00,990
One is going to be for Cloudinary.

15
00:01:01,020 --> 00:01:03,930
So essentially a package we just set up.

16
00:01:04,420 --> 00:01:07,150
And I'm going to call this import cloudinary.

17
00:01:07,270 --> 00:01:10,270
For some reason I have a typo over here.

18
00:01:10,270 --> 00:01:11,380
So from.

19
00:01:11,740 --> 00:01:14,410
And then the package that I'm looking for is Cloudinary.

20
00:01:14,440 --> 00:01:17,080
And after that I want to import the file system module.

21
00:01:17,110 --> 00:01:21,640
However, I basically want to import the promises option.

22
00:01:21,640 --> 00:01:24,790
So essentially I don't want to use the callback approach.

23
00:01:24,820 --> 00:01:27,340
I just want to stick a in front of it.

24
00:01:27,370 --> 00:01:35,350
So on a module there's going to be a method which allows us to remove the image just like I did manually,

25
00:01:35,350 --> 00:01:40,060
but I just want to stick a weight in front of it instead of the callback approach.

26
00:01:40,150 --> 00:01:41,290
Hopefully that is clear.

27
00:01:41,290 --> 00:01:46,740
So in here we just want to go with promises as FS.

28
00:01:47,490 --> 00:01:50,680
And then the file system module like so.

29
00:01:50,700 --> 00:01:56,610
Now alternatively, you can go with forward slash and promises, but I'm going to stick with this approach.

30
00:01:56,700 --> 00:02:00,420
Then let's scroll down and let's start setting up the functionality.

31
00:02:00,540 --> 00:02:04,920
So first thing we want to do is to set up a check.

32
00:02:04,950 --> 00:02:11,340
So essentially I only want to upload the image if the user is sending the image.

33
00:02:11,550 --> 00:02:15,930
Again, please keep in mind we can update the user without updating the image.

34
00:02:16,550 --> 00:02:20,360
So therefore we're going to go here with if then rec dot file.

35
00:02:20,360 --> 00:02:23,670
So if it exists, then we want to do something.

36
00:02:23,690 --> 00:02:24,950
Now what is that something?

37
00:02:24,950 --> 00:02:30,950
Well, for starters, we're going to go here with response and we'll set it equal to await and then

38
00:02:30,950 --> 00:02:32,060
we'll go with Cloudinary.

39
00:02:32,060 --> 00:02:40,130
So Cloudinary package has the method upload and essentially we want to stick await in front of it.

40
00:02:40,160 --> 00:02:44,420
Now not only we go with upload, but also we need to add version two.

41
00:02:44,450 --> 00:02:46,400
This is very, very important.

42
00:02:46,400 --> 00:02:50,600
Then uploader, then dot and then finally upload.

43
00:02:50,600 --> 00:02:57,650
And then in the upload method we want to pass in the req dot file dot path.

44
00:02:57,650 --> 00:03:00,470
So req file and path.

45
00:03:00,590 --> 00:03:03,530
And then this is going to return an object.

46
00:03:03,560 --> 00:03:09,890
If we're successful, there are some values we want to grab from there, but before we save anything

47
00:03:09,890 --> 00:03:14,720
in the database, like I said, I want to remove that file, so I'm not going to do that.

48
00:03:14,720 --> 00:03:15,860
Of course, manually.

49
00:03:15,860 --> 00:03:19,770
I'm going to go here with Await then FS, So that's my module.

50
00:03:19,770 --> 00:03:22,590
And then the method that I'm looking for is Unlink.

51
00:03:22,590 --> 00:03:27,810
And in here again, same deal we want to pass in req dot file dot path.

52
00:03:27,810 --> 00:03:33,150
So if I can successfully upload to cloudinary, I don't want to keep that image around.

53
00:03:33,150 --> 00:03:37,950
Now as far as this response, like I said, this is going to be a giant object and in there I'm looking

54
00:03:37,950 --> 00:03:41,490
for two properties, I'm looking for secure URL.

55
00:03:41,490 --> 00:03:47,040
So this link will point to the image and therefore it's always going to be around.

56
00:03:47,040 --> 00:03:50,820
And of course I'll use that link on the front end to display the image.

57
00:03:51,150 --> 00:03:53,850
And also I want to get the public ID.

58
00:03:54,120 --> 00:03:54,960
Why?

59
00:03:54,990 --> 00:04:02,160
Well, because I don't want to keep the old images around and I want to remove the old image.

60
00:04:02,160 --> 00:04:08,340
If the user already uploaded an image before and you'll see what I'm talking about in a second.

61
00:04:08,430 --> 00:04:15,300
So remember, we have over here this object and I actually want to rename it instead of this generic

62
00:04:15,300 --> 00:04:17,399
object, I'm going to call this new user.

63
00:04:18,529 --> 00:04:21,350
Then in here I'll change it to new user.

64
00:04:21,680 --> 00:04:25,520
And also remember here we're passing this object.

65
00:04:26,470 --> 00:04:28,290
Let me rename it to new user.

66
00:04:28,300 --> 00:04:32,440
Now, this is not going to affect the functionality, but at least that's going to be my approach.

67
00:04:32,440 --> 00:04:39,640
So I'm creating a new user and basically we want to go here with new user dot and then remember the

68
00:04:39,640 --> 00:04:40,420
property name.

69
00:04:40,420 --> 00:04:42,130
It was Avatar, correct?

70
00:04:42,220 --> 00:04:51,310
So I want to set it equal to response, then dot, then like I said, secure URL and the second property

71
00:04:51,310 --> 00:04:54,670
I want to set up is that Avatar Public ID?

72
00:04:54,970 --> 00:04:58,360
So new user and then Avatar.

73
00:04:59,650 --> 00:05:08,500
Public and then ID and that one is equal to response dot and public underscore ID.

74
00:05:08,740 --> 00:05:13,660
Now, once we're done with this condition, of course we still use find by ID and update.

75
00:05:13,660 --> 00:05:15,490
So we still update the user.

76
00:05:15,490 --> 00:05:20,230
But notice how I'm not returning the updated user.

77
00:05:20,230 --> 00:05:26,860
So essentially in this updated user we have the old instance before the update.

78
00:05:26,890 --> 00:05:28,360
Now why do we want to do that?

79
00:05:28,360 --> 00:05:31,630
Well, like I said, imagine this scenario.

80
00:05:31,660 --> 00:05:37,330
I upload the image, I use that image for one week, two weeks or whatever, and then I decide that

81
00:05:37,330 --> 00:05:39,760
I'm going to upload a new file.

82
00:05:39,940 --> 00:05:44,890
So we nicely remove that image right away from the local file system.

83
00:05:44,890 --> 00:05:45,480
Correct.

84
00:05:45,490 --> 00:05:48,850
We don't have any old images lying around, however.

85
00:05:49,740 --> 00:05:51,420
With the current setup.

86
00:05:51,910 --> 00:05:53,190
In the cloudinary.

87
00:05:53,200 --> 00:05:59,320
I can get tons of images and most of them can be just some old images lying around.

88
00:05:59,320 --> 00:06:05,770
And keep in mind, whenever you start using services like Cloudinary, they pretty much charge you for

89
00:06:05,770 --> 00:06:10,420
the amount of data you're storing, the amount of data you're requesting and all that.

90
00:06:10,420 --> 00:06:14,890
So we definitely don't want to keep some old images lying around.

91
00:06:14,890 --> 00:06:22,270
So if the user is updating the image, we want to remove the old one.

92
00:06:22,270 --> 00:06:29,290
And therefore in here I'm returning the old instance because I want to access that public ID since the

93
00:06:29,290 --> 00:06:32,950
Cloudinary package in order to remove it, is looking for that value.

94
00:06:32,980 --> 00:06:39,250
Now again, please keep in mind that I only want to do that if the user is sending the image.

95
00:06:39,430 --> 00:06:44,860
Since again, if the user is just trying to change the name, of course I don't want to do that and

96
00:06:44,860 --> 00:06:46,810
therefore I'm going to set up another condition.

97
00:06:46,810 --> 00:06:54,470
I'll say, listen, if the rec dot file is present, then I want to actually remove the old one.

98
00:06:54,470 --> 00:07:01,280
But I also want to check whether there is an existing image on the cloudinary because please keep in

99
00:07:01,280 --> 00:07:05,630
mind that the first time we register the user, of course we were not providing the image.

100
00:07:05,630 --> 00:07:11,330
So the first time the user is uploading the image, there's not going to be that old public ID.

101
00:07:12,200 --> 00:07:14,600
Basically it's just going to be an empty string.

102
00:07:14,600 --> 00:07:21,380
So therefore in here, I want to also check whether there is an old image and I can check that since

103
00:07:21,380 --> 00:07:27,410
I'm returning the old instance and I'm just going to go with updated user.

104
00:07:27,770 --> 00:07:33,020
And if you want, of course you can call this old user maybe if that makes more sense to you.

105
00:07:33,020 --> 00:07:40,310
And then I want to go with public ID, So if there's a new file and if there is an old one in the cloudinary,

106
00:07:40,340 --> 00:07:42,500
then I want to proceed.

107
00:07:42,500 --> 00:07:45,530
And essentially I just want to go here with Await.

108
00:07:45,560 --> 00:07:53,420
Then again, Cloudinary package version two super, super important, then uploader, then the method

109
00:07:53,420 --> 00:08:02,180
is destroying this case and like I said, it's looking for the updated user dot avatar and public ID,

110
00:08:02,390 --> 00:08:04,160
so it's looking for.

111
00:08:04,720 --> 00:08:06,100
That string value.

112
00:08:06,520 --> 00:08:13,120
And once we are done with the server, now we quickly want to swing back to the client.

113
00:08:13,150 --> 00:08:16,150
We're looking for source more specifically components.

114
00:08:16,150 --> 00:08:20,800
And then somewhere here there should be a logout container.

115
00:08:20,800 --> 00:08:26,750
And remember when we were setting up the button, I said that eventually we'll have a condition for

116
00:08:26,750 --> 00:08:27,510
the circle.

117
00:08:27,520 --> 00:08:34,270
So like I keep saying, initially when we register the user, there's not going to be the image.

118
00:08:34,299 --> 00:08:42,070
We're only going to have image if, let's say, user navigates to a profile and then uploads the image.

119
00:08:42,070 --> 00:08:45,280
That was my setup for this application.

120
00:08:45,280 --> 00:08:51,730
So in here I want to set up a condition where if the avatar is present, then I actually want to use

121
00:08:51,730 --> 00:08:53,500
that avatar property.

122
00:08:53,740 --> 00:08:57,850
Now, if there is no avatar, then I'm going to go with the circle.

123
00:08:57,970 --> 00:08:59,190
So let me showcase.

124
00:08:59,200 --> 00:09:01,420
I'm going to go here with user object.

125
00:09:02,230 --> 00:09:02,950
Avatar.

126
00:09:02,950 --> 00:09:10,420
And then I'll set up the ternary operator and I'll say, Hey, listen, if it's actually present, I'm

127
00:09:10,420 --> 00:09:12,460
going to go with image source.

128
00:09:12,490 --> 00:09:15,880
Now, the good news is we already set up the.

129
00:09:16,660 --> 00:09:17,710
CSS for it.

130
00:09:17,890 --> 00:09:21,730
And as far as the source is going to be dynamic, I'm going to use again that.

131
00:09:22,340 --> 00:09:23,350
String value.

132
00:09:23,360 --> 00:09:25,100
So user avatar.

133
00:09:25,130 --> 00:09:27,680
Then let's add also the alternative.

134
00:09:28,190 --> 00:09:32,420
I'm just going to go with Avatar and then let's not forget about the class name.

135
00:09:32,420 --> 00:09:34,550
And this is equal to an image.

136
00:09:34,700 --> 00:09:36,800
I want to close my image.

137
00:09:36,800 --> 00:09:43,210
And if the Avatar property is not present, then of course we'll just showcase the circle.

138
00:09:43,220 --> 00:09:47,810
So now let's navigate to the browser and let's basically test it out.

139
00:09:47,810 --> 00:09:53,540
I'll start everything from scratch over here, so let me log out then register.

140
00:09:53,570 --> 00:09:54,170
You know what?

141
00:09:54,170 --> 00:09:55,570
I'm going to go with Susan.

142
00:09:55,580 --> 00:09:57,170
So Susan Smith.

143
00:09:58,040 --> 00:10:00,770
And also we want to go, of course, with unique.

144
00:10:01,830 --> 00:10:02,400
Email.

145
00:10:02,430 --> 00:10:03,900
Let's save.

146
00:10:04,470 --> 00:10:07,380
So this, of course, is going to be equal to Susan.

147
00:10:08,250 --> 00:10:09,660
Okay, let's log in.

148
00:10:09,750 --> 00:10:11,100
We should have no jobs.

149
00:10:11,130 --> 00:10:14,040
That's totally fine if we navigate to a profile.

150
00:10:14,070 --> 00:10:21,360
Now, I want to upload the image because as you can see at the moment, we only have over here this

151
00:10:21,360 --> 00:10:21,930
icon.

152
00:10:21,930 --> 00:10:22,470
Correct.

153
00:10:22,500 --> 00:10:25,380
So let me go with the wrong image.

154
00:10:25,380 --> 00:10:31,320
Basically, let me go with Avatar one, just to showcase that that value is not going to be stored in

155
00:10:31,320 --> 00:10:32,010
the cloudinary.

156
00:10:32,010 --> 00:10:33,480
I'm talking about the old one.

157
00:10:33,480 --> 00:10:38,190
So let me just update, of course, this one over here and.

158
00:10:38,780 --> 00:10:40,700
Notice successful.

159
00:10:40,700 --> 00:10:43,390
And now I can actually see the image over here.

160
00:10:43,400 --> 00:10:47,450
Now it's the wrong image, but we're moving in the right direction.

161
00:10:47,450 --> 00:10:52,310
And again, before we actually check the cloudinary, I just want to emphasize something.

162
00:10:52,340 --> 00:10:57,620
If I'm going to go here with just a last name, of course everything is going to be fine.

163
00:10:58,130 --> 00:10:58,520
Correct.

164
00:10:58,520 --> 00:11:03,410
So we don't need to send the image each and every time we are updating the user.

165
00:11:03,410 --> 00:11:06,080
So now let's navigate to a cloudinary.

166
00:11:06,680 --> 00:11:08,510
I probably need to refresh.

167
00:11:09,880 --> 00:11:12,550
And then I'm looking for media.

168
00:11:13,480 --> 00:11:14,080
And check it out.

169
00:11:14,080 --> 00:11:17,100
So this is going to be my image, correct?

170
00:11:17,110 --> 00:11:19,120
That's the image I just uploaded.

171
00:11:19,120 --> 00:11:25,540
And again, the main reason why we had such extensive functionality in the update user is because I

172
00:11:25,540 --> 00:11:31,510
don't want to keep this old image if the user decides to change the image.

173
00:11:31,600 --> 00:11:36,730
Actually, before we update the image, I also want to stress something that we're not keeping those

174
00:11:36,730 --> 00:11:37,680
images around.

175
00:11:37,690 --> 00:11:44,440
So notice how the uploads is actually empty, but we have the image on cloud nine.

176
00:11:44,590 --> 00:11:46,450
So now let me navigate here.

177
00:11:47,490 --> 00:11:49,500
And pick the right avatar.

178
00:11:49,890 --> 00:11:52,020
So I want to pick this image.

179
00:11:52,500 --> 00:11:53,790
And let me send it.

180
00:11:54,440 --> 00:12:00,830
And notice I successfully changed the image profile was updated successfully.

181
00:12:00,830 --> 00:12:09,020
And if we navigate here and if we refresh notice, only the latest image is stored in the cloud, which

182
00:12:09,020 --> 00:12:11,300
is obviously super, super awesome.

183
00:12:11,430 --> 00:12:15,860
And with this in place, we're done with update user functionality.