1
00:00:01,290 --> 00:00:03,840
‫So let's now allow users

2
00:00:03,840 --> 00:00:07,883
‫to upload their photos right on our website.

3
00:00:09,610 --> 00:00:11,640
‫And so this is what we want.

4
00:00:11,640 --> 00:00:13,760
‫When we click here, we basically want

5
00:00:13,760 --> 00:00:15,915
‫to open a new window for which we can select

6
00:00:15,915 --> 00:00:19,370
‫a new image to upload and then when we click

7
00:00:19,370 --> 00:00:21,380
‫this button and submit a form

8
00:00:21,380 --> 00:00:23,990
‫of course then we want to upload that image

9
00:00:23,990 --> 00:00:27,520
‫into our backend and update the user, right.

10
00:00:27,520 --> 00:00:29,528
‫And so the first step into doing that

11
00:00:29,528 --> 00:00:33,400
‫will be to add a new input element to our html.

12
00:00:33,400 --> 00:00:35,490
‫So basically to our pack template

13
00:00:35,490 --> 00:00:37,850
‫which will then allow that file selector

14
00:00:37,850 --> 00:00:39,503
‫to open when we click here.

15
00:00:40,930 --> 00:00:43,800
‫So, let's go to our views

16
00:00:43,800 --> 00:00:48,800
‫and to account and so it's this form

17
00:00:49,010 --> 00:00:51,720
‫where we now have to add that input.

18
00:00:51,720 --> 00:00:55,420
‫So right now we have that link here which says new photo.

19
00:00:55,420 --> 00:00:58,800
‫But of course, it's not a link that we're going to use.

20
00:00:58,800 --> 00:01:01,280
‫So this was really just a placeholder.

21
00:01:01,280 --> 00:01:03,360
‫And so let's get rid of it.

22
00:01:03,360 --> 00:01:05,063
‫So what we need is an input.

23
00:01:06,280 --> 00:01:07,803
‫Off to type file.

24
00:01:09,955 --> 00:01:13,110
‫All right, so before, for the name

25
00:01:13,110 --> 00:01:15,980
‫we had an input with the type text.

26
00:01:15,980 --> 00:01:19,040
‫We also have input with the type of email

27
00:01:19,040 --> 00:01:22,925
‫and there are also a special ones for password.

28
00:01:22,925 --> 00:01:26,210
‫So input for password

29
00:01:26,210 --> 00:01:30,283
‫and so for files, there is one of course for files.

30
00:01:31,380 --> 00:01:35,263
‫We can then specify which kind of file we actually accept.

31
00:01:38,920 --> 00:01:40,950
‫And we can do something like this.

32
00:01:40,950 --> 00:01:43,410
‫Image and then all of them.

33
00:01:43,410 --> 00:01:46,210
‫So basically all formats get their images

34
00:01:46,210 --> 00:01:49,010
‫so which have a mind type starting

35
00:01:49,010 --> 00:01:50,823
‫with image are accepted here.

36
00:01:53,054 --> 00:01:55,780
‫Now let's also give this here a class name

37
00:01:55,780 --> 00:01:59,930
‫so that it appears nicely formatted on our page.

38
00:01:59,930 --> 00:02:03,660
‫And so this is the class name that I have in my css.

39
00:02:03,660 --> 00:02:06,940
‫And now also giving it an ID so that we can

40
00:02:06,940 --> 00:02:08,440
‫then select it in java script.

41
00:02:09,300 --> 00:02:12,690
‫Add that as photo and finally just like the

42
00:02:12,690 --> 00:02:15,840
‫other fields, we also give it a name.

43
00:02:15,840 --> 00:02:20,420
‫So name of photo as well.

44
00:02:20,420 --> 00:02:23,093
‫And of course it is photo because that's the name

45
00:02:23,093 --> 00:02:25,680
‫that we have in our user document

46
00:02:25,680 --> 00:02:29,063
‫and it's also the field name that multer is expecting.

47
00:02:30,106 --> 00:02:34,410
‫So this here is upload and then we also specify

48
00:02:34,410 --> 00:02:35,483
‫a label for it.

49
00:02:37,650 --> 00:02:40,293
‫And we set it to four and then the ID

50
00:02:40,293 --> 00:02:44,110
‫of the input element, all right.

51
00:02:44,110 --> 00:02:45,570
‫So I'm not sure if you're familiar

52
00:02:45,570 --> 00:02:47,890
‫with how that works in html

53
00:02:47,890 --> 00:02:49,640
‫but it's also not really important.

54
00:02:51,329 --> 00:02:53,600
‫So the way it happens is that when we click

55
00:02:53,600 --> 00:02:56,320
‫this label here, it will then actually activate

56
00:02:56,320 --> 00:02:58,610
‫the input element which has the ID

57
00:02:58,610 --> 00:03:00,500
‫that we specify here in form.

58
00:03:00,500 --> 00:03:03,870
‫And so in that case that is the photo, all right.

59
00:03:03,870 --> 00:03:05,343
‫And actually it's this label here

60
00:03:05,343 --> 00:03:09,403
‫which will have the text choose new photo.

61
00:03:11,030 --> 00:03:12,950
‫And so when we then click the label

62
00:03:12,950 --> 00:03:14,597
‫it will then activate this input

63
00:03:14,597 --> 00:03:16,830
‫which in turn will open up the window

64
00:03:16,830 --> 00:03:18,913
‫from which we can select a file.

65
00:03:20,060 --> 00:03:23,090
‫And so that's all we need to do for the input here.

66
00:03:23,090 --> 00:03:26,290
‫Now, just like before, there are two possible ways

67
00:03:26,290 --> 00:03:28,710
‫of sending this data to the server.

68
00:03:28,710 --> 00:03:31,480
‫So first, without the API as we did

69
00:03:31,480 --> 00:03:32,840
‫in one previous lecture.

70
00:03:32,840 --> 00:03:35,470
‫We already find the action that we want to take

71
00:03:35,470 --> 00:03:37,370
‫and also the method.

72
00:03:37,370 --> 00:03:38,760
‫And with that the data is

73
00:03:38,760 --> 00:03:41,180
‫then directly sent to the server.

74
00:03:41,180 --> 00:03:43,130
‫Now if we wanted to send a file

75
00:03:43,130 --> 00:03:45,440
‫using this method, we then would need

76
00:03:45,440 --> 00:03:47,220
‫to specify another option here.

77
00:03:47,220 --> 00:03:49,801
‫And that is the enc type.

78
00:03:49,801 --> 00:03:54,520
‫So enc type would have to be multi-part form data.

79
00:03:54,520 --> 00:03:59,520
‫So multi-part slash form data, all right.

80
00:04:02,530 --> 00:04:06,090
‫And so here again, we have this name multi-part.

81
00:04:06,090 --> 00:04:07,948
‫And so as we said before, multi-part

82
00:04:07,948 --> 00:04:11,220
‫is always for sending files to the server.

83
00:04:11,220 --> 00:04:13,864
‫And again we actually need the multer middleware

84
00:04:13,864 --> 00:04:17,164
‫to handle this multi-part form data, all right.

85
00:04:17,164 --> 00:04:20,650
‫And actually the name multer comes from multi-part.

86
00:04:20,650 --> 00:04:23,317
‫So mult, multer, okay.

87
00:04:23,317 --> 00:04:26,830
‫Anyway again if we wanted to send the data

88
00:04:26,830 --> 00:04:29,320
‫without an API, we would always have

89
00:04:29,320 --> 00:04:31,200
‫to specify this enc type.

90
00:04:31,200 --> 00:04:33,740
‫Otherwise the form would simply ignore the file

91
00:04:33,740 --> 00:04:35,623
‫and not send it, okay.

92
00:04:35,623 --> 00:04:38,370
‫But as we already know, we are actually

93
00:04:38,370 --> 00:04:41,780
‫using it with the API, right.

94
00:04:41,780 --> 00:04:44,727
‫And so we do not need to specify this enc type

95
00:04:44,727 --> 00:04:48,630
‫but we will kind of have to do it programmatically.

96
00:04:48,630 --> 00:04:51,382
‫And so let's actually do that.

97
00:04:51,382 --> 00:04:54,180
‫So let's now send our data, including

98
00:04:54,180 --> 00:04:56,920
‫of course the photo by doing an API call

99
00:04:56,920 --> 00:04:59,970
‫such as we've been doing in the last section.

100
00:04:59,970 --> 00:05:04,100
‫And so we need to now open in our public folder

101
00:05:04,100 --> 00:05:08,973
‫and from their js, we open up index.js.

102
00:05:10,360 --> 00:05:13,560
‫And so right here is where we actually

103
00:05:13,560 --> 00:05:17,010
‫send the data to be updated on the server.

104
00:05:17,010 --> 00:05:19,260
‫Well we're not really sending them here

105
00:05:19,260 --> 00:05:21,960
‫but we're selecting them from the form

106
00:05:21,960 --> 00:05:24,790
‫and then passing them into update settings.

107
00:05:24,790 --> 00:05:27,260
‫All right, but now remember how I said

108
00:05:27,260 --> 00:05:29,590
‫that we kind of needed to programmatically

109
00:05:29,590 --> 00:05:32,660
‫recreate a multi-part form data?

110
00:05:32,660 --> 00:05:34,893
‫And so we need to do it like this.

111
00:05:42,020 --> 00:05:46,740
‫Let's call it form and then new form data.

112
00:05:48,580 --> 00:05:51,200
‫All right, and now onto that form

113
00:05:51,200 --> 00:05:53,883
‫we need to keep appending new data.

114
00:05:53,883 --> 00:05:57,152
‫And basically one append for each

115
00:05:57,152 --> 00:05:59,143
‫of the data that we want to send.

116
00:06:00,370 --> 00:06:04,400
‫So form.append and the first one is the name.

117
00:06:04,400 --> 00:06:08,250
‫So we specify name here and then the value of the name.

118
00:06:08,250 --> 00:06:11,000
‫And so that is of course this one.

119
00:06:11,000 --> 00:06:15,363
‫So let's grab that, paste it here and duplicate it.

120
00:06:16,870 --> 00:06:19,653
‫And next up is the email, okay.

121
00:06:20,690 --> 00:06:24,580
‫Then let's get rid of this enter into update settings.

122
00:06:24,580 --> 00:06:28,040
‫We then pass the form, okay.

123
00:06:28,040 --> 00:06:30,560
‫And or a text call using axios

124
00:06:30,560 --> 00:06:32,350
‫will then actually recognize this form

125
00:06:32,350 --> 00:06:34,480
‫here as an object and will work

126
00:06:34,480 --> 00:06:37,550
‫just the same as it did before, okay.

127
00:06:37,550 --> 00:06:39,900
‫So here in update settings where we pass

128
00:06:39,900 --> 00:06:42,178
‫in the data, which is then passed

129
00:06:42,178 --> 00:06:44,980
‫in here into the axios request,

130
00:06:44,980 --> 00:06:47,543
‫we do not need to change anything.

131
00:06:49,090 --> 00:06:51,810
‫All right, so this is equivalent

132
00:06:51,810 --> 00:06:54,380
‫to what we had before with name and email

133
00:06:54,380 --> 00:06:57,050
‫but now of course let's also add the photo

134
00:06:57,050 --> 00:06:59,380
‫which is the entire reason why we now

135
00:06:59,380 --> 00:07:00,580
‫have to do it like this.

136
00:07:02,590 --> 00:07:07,590
‫So form.append again then the name

137
00:07:07,650 --> 00:07:10,400
‫we want to give it is of course again, photo

138
00:07:12,093 --> 00:07:12,970
‫and then document

139
00:07:14,176 --> 00:07:17,860
‫.getelementbyid which is also photo

140
00:07:20,530 --> 00:07:22,930
‫but now it is not .value

141
00:07:22,930 --> 00:07:25,920
‫but instead .files, all right.

142
00:07:25,920 --> 00:07:28,170
‫And these files are actually in array

143
00:07:28,170 --> 00:07:30,260
‫and so since there's only one,

144
00:07:30,260 --> 00:07:33,260
‫we need to select that first element in the array

145
00:07:33,260 --> 00:07:34,733
‫and so that's zero.

146
00:07:36,880 --> 00:07:40,810
‫All right, and let's actually log this form to the console

147
00:07:40,810 --> 00:07:42,340
‫just 'til we get a quick look

148
00:07:43,360 --> 00:07:45,870
‫at what this form actually is.

149
00:07:45,870 --> 00:07:48,280
‫But in a nutshell, as I said before,

150
00:07:48,280 --> 00:07:52,480
‫we basically recreate this multi-part form data.

151
00:07:52,480 --> 00:07:55,200
‫And so that's actually why it's called form data

152
00:07:55,200 --> 00:07:58,640
‫is because, well, that form data is also here

153
00:07:58,640 --> 00:08:02,173
‫in this multi-part enc type, okay.

154
00:08:03,750 --> 00:08:06,450
‫So, I guess that is actually enough

155
00:08:06,450 --> 00:08:08,670
‫for us to now try this out.

156
00:08:08,670 --> 00:08:10,860
‫So as I said, in update settings,

157
00:08:10,860 --> 00:08:13,030
‫there's nothing that we need to change

158
00:08:13,030 --> 00:08:15,320
‫and also the update me endpoint

159
00:08:15,320 --> 00:08:18,630
‫where we are submitting this request tool

160
00:08:18,630 --> 00:08:21,040
‫so this one has also already working

161
00:08:21,040 --> 00:08:25,230
‫and ready to accept images and even to resize them, right.

162
00:08:25,230 --> 00:08:28,319
‫And so let's now go ahead and try this.

163
00:08:28,319 --> 00:08:32,050
‫And so let's reload this one more time.

164
00:08:32,050 --> 00:08:36,031
‫And so let's see, and indeed we now get

165
00:08:36,031 --> 00:08:38,450
‫our file picker basically.

166
00:08:38,450 --> 00:08:40,550
‫So this window where we can now select

167
00:08:40,550 --> 00:08:42,370
‫the file and what I'm going to do

168
00:08:42,370 --> 00:08:45,620
‫is to basically put back the original image

169
00:08:45,620 --> 00:08:47,730
‫that we had on this user.

170
00:08:47,730 --> 00:08:52,513
‫So that's on desktop, natours, public, image

171
00:08:54,060 --> 00:08:58,700
‫users, and it was user 11, so this one.

172
00:08:58,700 --> 00:09:00,050
‫And so that's now uploaded.

173
00:09:01,940 --> 00:09:06,940
‫So open, save to settings, and data update is successfully.

174
00:09:07,780 --> 00:09:10,180
‫Now it doesn't reflect here immediately.

175
00:09:10,180 --> 00:09:13,280
‫Neither here nor up here but it should

176
00:09:13,280 --> 00:09:15,393
‫so once we upload this page.

177
00:09:16,410 --> 00:09:19,540
‫And we could indeed also do it with java script

178
00:09:19,540 --> 00:09:21,620
‫but that's actually a lot of work.

179
00:09:21,620 --> 00:09:23,740
‫I'd tried to do it and I did it

180
00:09:23,740 --> 00:09:26,800
‫but then I thought that it's just too much work

181
00:09:26,800 --> 00:09:29,630
‫and not worth to implement it here.

182
00:09:29,630 --> 00:09:32,040
‫But anyway just to test if it actually worked,

183
00:09:32,040 --> 00:09:34,320
‫we need to now reload the page.

184
00:09:34,320 --> 00:09:35,840
‫And it did.

185
00:09:35,840 --> 00:09:39,320
‫Here is now the new image that we just uploaded.

186
00:09:39,320 --> 00:09:41,450
‫So, great.

187
00:09:41,450 --> 00:09:44,210
‫Let's take a look at the folder itself.

188
00:09:44,210 --> 00:09:46,530
‫If it's actually there, also, and if

189
00:09:46,530 --> 00:09:48,810
‫it was correctly transformed.

190
00:09:48,810 --> 00:09:52,030
‫So that's an image.

191
00:09:52,030 --> 00:09:53,293
‫Let's reload it here.

192
00:09:57,240 --> 00:09:59,663
‫And so now I'm not sure which one it is.

193
00:10:00,890 --> 00:10:02,690
‫Ah, exactly.

194
00:10:02,690 --> 00:10:07,200
‫So 500 times 500 and now that it's completely blurred

195
00:10:07,200 --> 00:10:10,440
‫because the original image was a lot smaller.

196
00:10:10,440 --> 00:10:12,643
‫But nevermind, that doesn't matter at all.

197
00:10:13,910 --> 00:10:17,570
‫What matters is that we can now actually upload photos

198
00:10:17,570 --> 00:10:19,830
‫right from this form.

199
00:10:19,830 --> 00:10:22,480
‫I want that's all to take a look at our console here

200
00:10:22,480 --> 00:10:27,480
‫at that form data that I thought that we had logged

201
00:10:27,546 --> 00:10:29,530
‫and it didn't appear here

202
00:10:29,530 --> 00:10:32,184
‫because we already reloaded the page.

203
00:10:32,184 --> 00:10:36,543
‫But anyway, I wanted to put the other image back here.

204
00:10:39,290 --> 00:10:41,820
‫So the one that we actually uploaded before

205
00:10:41,820 --> 00:10:46,820
‫which is in dev-data, image, and aarav.

206
00:10:50,040 --> 00:10:53,340
‫All right, data updated successfully.

207
00:10:53,340 --> 00:10:56,760
‫Let's just quickly take a look at our phone data here.

208
00:10:56,760 --> 00:11:00,173
‫Ah, but I guess we cannot really see what we have here.

209
00:11:01,100 --> 00:11:02,223
‫Let's see.

210
00:11:04,045 --> 00:11:06,689
‫Nah, we cannot really see what we have.

211
00:11:06,689 --> 00:11:09,160
‫Okay, so I never took a look at this.

212
00:11:09,160 --> 00:11:10,110
‫And I thought we could maybe

213
00:11:10,110 --> 00:11:12,850
‫see the information but nevermind.

214
00:11:12,850 --> 00:11:16,170
‫What matters is that it actually worked.

215
00:11:16,170 --> 00:11:18,191
‫So, if we reload now, then of course

216
00:11:18,191 --> 00:11:21,940
‫this older image is back again.

217
00:11:21,940 --> 00:11:25,000
‫Awesome, so once more, this application

218
00:11:25,000 --> 00:11:28,583
‫is really starting to feel more and more real work like.