1
00:00:01,170 --> 00:00:03,440
‫In the first part of this section

2
00:00:03,440 --> 00:00:06,140
‫we will be learning all about uploading images

3
00:00:06,140 --> 00:00:09,660
‫with the Multer package and in this particular video

4
00:00:09,660 --> 00:00:13,653
‫we will start implementing image uploads for user photos.

5
00:00:15,230 --> 00:00:18,900
‫But before we start let's do some quick cleanup here

6
00:00:18,900 --> 00:00:22,450
‫and get rid of this constant output of

7
00:00:22,450 --> 00:00:24,570
‫the cookies that we have here.

8
00:00:24,570 --> 00:00:29,093
‫So that's somewhere down here and so that's much better.

9
00:00:30,430 --> 00:00:33,610
‫Now we're gonna be working on uploading user photos

10
00:00:33,610 --> 00:00:38,010
‫and let's open up here the user routes, all right.

11
00:00:38,010 --> 00:00:41,310
‫So, Multer is a very popular middleware

12
00:00:41,310 --> 00:00:45,510
‫to handle multi-part form data, which is a form in coding

13
00:00:45,510 --> 00:00:48,540
‫that's used to upload files from a form.

14
00:00:48,540 --> 00:00:51,200
‫So remember how in the last section we used

15
00:00:51,200 --> 00:00:55,160
‫a URL encoded form in order to update user data

16
00:00:55,160 --> 00:00:58,570
‫and for that we also had to include a special middleware.

17
00:00:58,570 --> 00:01:01,000
‫And so Multer is basically a middleware

18
00:01:01,000 --> 00:01:03,580
‫for multi-part form data.

19
00:01:03,580 --> 00:01:05,770
‫And now here is what we're gonna do.

20
00:01:05,770 --> 00:01:08,460
‫We will allow the user to upload a photo

21
00:01:08,460 --> 00:01:11,064
‫on the Update Me route and so instead of

22
00:01:11,064 --> 00:01:14,430
‫just being able to update email and photo,

23
00:01:14,430 --> 00:01:18,620
‫users will then also be able to upload their user photos.

24
00:01:18,620 --> 00:01:21,970
‫So once more, let's start by installing the package

25
00:01:21,970 --> 00:01:25,330
‫that we need and actually let's create a new

26
00:01:25,330 --> 00:01:30,267
‫terminal window here and so NPM install Multer.

27
00:01:32,586 --> 00:01:37,437
‫All right and here we see that we're on Multer 1.4.1.

28
00:01:38,420 --> 00:01:41,160
‫And so again in case you run into any trouble

29
00:01:41,160 --> 00:01:43,490
‫with this package please just make sure that

30
00:01:43,490 --> 00:01:45,983
‫you install the same version as I'm using here.

31
00:01:47,241 --> 00:01:48,074
‫All right.

32
00:01:49,150 --> 00:01:51,313
‫So, let's include that here.

33
00:01:52,930 --> 00:01:57,070
‫So Multer, require, Multer.

34
00:01:58,840 --> 00:02:03,040
‫So, easy and now we need to configure a so called

35
00:02:03,040 --> 00:02:05,780
‫Multer upload and then use it.

36
00:02:05,780 --> 00:02:08,030
‫And let's do that right here at the beginning

37
00:02:09,330 --> 00:02:14,330
‫and let's call it Upload and we call the Multer function

38
00:02:16,380 --> 00:02:19,090
‫that we just included before and then pass

39
00:02:19,090 --> 00:02:21,160
‫in an object for some options.

40
00:02:21,160 --> 00:02:23,730
‫And for now the only option that we're gonna specify

41
00:02:23,730 --> 00:02:26,180
‫is the destination and I'm gonna set

42
00:02:26,180 --> 00:02:31,180
‫it to Public/image/users, all right.

43
00:02:34,940 --> 00:02:36,870
‫And so that is exactly the folder

44
00:02:36,870 --> 00:02:38,780
‫where we want to save all the images

45
00:02:38,780 --> 00:02:40,570
‫that are being uploaded.

46
00:02:40,570 --> 00:02:45,570
‫So that's here, Public, Image and Users,

47
00:02:45,740 --> 00:02:48,063
‫such as all the images for all the users

48
00:02:48,063 --> 00:02:50,750
‫that we already have in our database.

49
00:02:50,750 --> 00:02:53,770
‫Right and of course we can configure this in

50
00:02:53,770 --> 00:02:56,480
‫a much more complex way and we're gonna be doing

51
00:02:56,480 --> 00:02:58,670
‫that in our next lecture but for now

52
00:02:58,670 --> 00:03:02,190
‫I really want you to just introduce to this package

53
00:03:02,190 --> 00:03:04,697
‫and by the way, we could actually just have called

54
00:03:04,697 --> 00:03:08,010
‫the Multer function without any options in there.

55
00:03:08,010 --> 00:03:10,940
‫So without this here and then the uploaded image

56
00:03:10,940 --> 00:03:13,749
‫would simply be stored in memory and not saved anywhere to

57
00:03:13,749 --> 00:03:17,590
‫the disc but of course at this point that's not what we want

58
00:03:17,590 --> 00:03:21,290
‫and so we at least need to specify this destination option.

59
00:03:21,290 --> 00:03:23,620
‫And with this our file is then really uploaded

60
00:03:23,620 --> 00:03:26,450
‫into a directory in our file system.

61
00:03:26,450 --> 00:03:29,080
‫And I mentioned this before but let's just

62
00:03:29,080 --> 00:03:31,960
‫make really sure that we're on the same page about this,

63
00:03:31,960 --> 00:03:34,870
‫which is that of course images are not directly

64
00:03:34,870 --> 00:03:37,770
‫uploaded into the database, we just upload them

65
00:03:37,770 --> 00:03:40,700
‫into our file system and then in the database

66
00:03:40,700 --> 00:03:43,510
‫we put a link basically to that image.

67
00:03:43,510 --> 00:03:46,170
‫So in this case in each user document we will

68
00:03:46,170 --> 00:03:49,450
‫have to name all of the uploaded file, okay.

69
00:03:49,450 --> 00:03:51,690
‫Now again, we're not doing that in this video

70
00:03:51,690 --> 00:03:53,550
‫but we will do a bit later.

71
00:03:53,550 --> 00:03:55,603
‫For now let's just make this work.

72
00:03:56,490 --> 00:03:59,000
‫Anyway, what we need to do now is to use this

73
00:03:59,000 --> 00:04:02,150
‫upload here to really create a middleware function

74
00:04:02,150 --> 00:04:05,223
‫that we can put here into the Update Me route.

75
00:04:06,100 --> 00:04:09,343
‫So here, and it works like this.

76
00:04:10,700 --> 00:04:14,670
‫So upload, dot single, and it's single because

77
00:04:14,670 --> 00:04:17,810
‫here we only want to update one single image

78
00:04:17,810 --> 00:04:20,830
‫and then here into single we pass the name of the field

79
00:04:20,830 --> 00:04:22,993
‫that is going to hold the image to upload.

80
00:04:24,000 --> 00:04:26,480
‫And so that will be photo, okay.

81
00:04:26,480 --> 00:04:29,023
‫And with field I mean the field in the form

82
00:04:29,023 --> 00:04:31,620
‫that is going to be uploading the image.

83
00:04:31,620 --> 00:04:34,400
‫All right, it makes sense?

84
00:04:34,400 --> 00:04:38,040
‫So again, we included the Multer package

85
00:04:38,040 --> 00:04:41,560
‫and then with that we created an upload.

86
00:04:41,560 --> 00:04:44,700
‫And this upload is just to define a couple of settings

87
00:04:44,700 --> 00:04:48,640
‫where in this example we only define the destination

88
00:04:48,640 --> 00:04:52,260
‫then we use that upload to create a new middleware

89
00:04:52,260 --> 00:04:55,560
‫that we can then add to this stack of the route

90
00:04:55,560 --> 00:04:58,400
‫that we want to use to upload the file.

91
00:04:58,400 --> 00:05:01,130
‫So for that we say upload dot single

92
00:05:01,130 --> 00:05:03,390
‫because we only have one single file

93
00:05:03,390 --> 00:05:06,160
‫and then finally we specify the name of the field

94
00:05:06,160 --> 00:05:08,570
‫that is going to hold this file.

95
00:05:08,570 --> 00:05:11,600
‫Okay, and so this middleware will then take care

96
00:05:11,600 --> 00:05:14,610
‫of taking the file and basically copying it

97
00:05:14,610 --> 00:05:16,960
‫to the destination that we specified.

98
00:05:16,960 --> 00:05:19,040
‫And then after that of course it will call

99
00:05:19,040 --> 00:05:22,083
‫the next middleware in the stack which is Update Me.

100
00:05:23,210 --> 00:05:26,470
‫Also, this middleware here will put the file

101
00:05:26,470 --> 00:05:28,600
‫or at least some information about the file

102
00:05:28,600 --> 00:05:30,810
‫on the request object and so let's

103
00:05:30,810 --> 00:05:33,080
‫actually take a look at that.

104
00:05:33,080 --> 00:05:36,123
‫So let's go to the Update Me function.

105
00:05:38,490 --> 00:05:42,320
‫So right here and right here at the beginning

106
00:05:43,300 --> 00:05:48,163
‫let's say console dot log, reg dot file.

107
00:05:49,630 --> 00:05:50,463
‫All right?

108
00:05:51,410 --> 00:05:55,430
‫And also I want to take a look at the body.

109
00:05:55,430 --> 00:05:58,307
‫Great and so with this we're now actually ready

110
00:05:58,307 --> 00:06:02,320
‫to test this and for now we will be testing it

111
00:06:02,320 --> 00:06:04,820
‫in postman but of course later on we will

112
00:06:04,820 --> 00:06:08,253
‫also add this functionality to the form, all right.

113
00:06:09,220 --> 00:06:13,720
‫So let's go to postman here and to Update Me.

114
00:06:13,720 --> 00:06:16,023
‫So basically to update the current user.

115
00:06:17,380 --> 00:06:20,430
‫And the user that I want to update is called Leo,

116
00:06:20,430 --> 00:06:23,700
‫so let's get him here from Compass,

117
00:06:23,700 --> 00:06:26,710
‫or actually I think that's not even necessary

118
00:06:26,710 --> 00:06:30,460
‫because in our login we already have this kind

119
00:06:30,460 --> 00:06:35,010
‫of email address and his email is leo@example.com

120
00:06:35,010 --> 00:06:38,090
‫and the password is always the same.

121
00:06:38,090 --> 00:06:41,390
‫And so we of course first need to login as the user

122
00:06:41,390 --> 00:06:44,653
‫and so now let's go ahead and then update to the user.

123
00:06:46,620 --> 00:06:50,010
‫So in the body we have the name and the role.

124
00:06:50,010 --> 00:06:53,593
‫So let's only update, let's say the name here.

125
00:06:54,560 --> 00:06:59,500
‫So the current name is Leo Gillespie or Gillespie,

126
00:06:59,500 --> 00:07:01,113
‫not sure how to say that.

127
00:07:02,800 --> 00:07:07,800
‫Let's just add something here in the middle, okay.

128
00:07:07,870 --> 00:07:11,283
‫And now finally we specify the photo property,

129
00:07:13,270 --> 00:07:16,370
‫or actually we should not do it like this

130
00:07:16,370 --> 00:07:21,100
‫but instead we should go here to form data, okay,

131
00:07:21,100 --> 00:07:22,810
‫because this is the way how we can

132
00:07:22,810 --> 00:07:25,543
‫send multi-part form data, all right.

133
00:07:26,410 --> 00:07:31,410
‫So, let's copy just the name here and it's Name.

134
00:07:33,470 --> 00:07:37,813
‫All right, so here the key is Name and

135
00:07:37,813 --> 00:07:40,763
‫then the value is this one.

136
00:07:42,350 --> 00:07:46,770
‫Next up, we then finally specify the photo field

137
00:07:46,770 --> 00:07:50,210
‫and then here we can actually specify what we want.

138
00:07:50,210 --> 00:07:52,700
‫And so instead of text which is the default

139
00:07:52,700 --> 00:07:56,520
‫we can specify file and then here we can select

140
00:07:56,520 --> 00:07:58,163
‫the file that we want to upload.

141
00:07:59,240 --> 00:08:04,240
‫So that file, that image, is here in our def data again,

142
00:08:04,350 --> 00:08:07,470
‫then in image and then here the image of Leo.

143
00:08:07,470 --> 00:08:10,430
‫And so that's why it shows this user.

144
00:08:10,430 --> 00:08:13,800
‫Okay, so click open and now I think

145
00:08:13,800 --> 00:08:16,193
‫we're ready to send that request.

146
00:08:17,960 --> 00:08:22,200
‫All right, we were successful and of course as I said before

147
00:08:22,200 --> 00:08:25,880
‫the photo did obviously not update here in the database

148
00:08:25,880 --> 00:08:28,450
‫output because that's for the next lecture.

149
00:08:28,450 --> 00:08:31,630
‫For now we just want to really upload this image

150
00:08:31,630 --> 00:08:33,803
‫to that folder that we specified.

151
00:08:34,960 --> 00:08:39,180
‫All right, now let's also take a look here at our output

152
00:08:39,180 --> 00:08:43,430
‫and so here we have request dot file, which is this one,

153
00:08:43,430 --> 00:08:46,460
‫and so we get all kinds of information about it.

154
00:08:46,460 --> 00:08:50,910
‫So the original name, it's destination that we specified,

155
00:08:50,910 --> 00:08:54,370
‫the new file name here, and also the size.

156
00:08:54,370 --> 00:08:57,980
‫Okay, so that is request dot file and then remember

157
00:08:57,980 --> 00:08:59,920
‫we also logged the body.

158
00:08:59,920 --> 00:09:03,810
‫And so the body is now only the name, all right.

159
00:09:03,810 --> 00:09:07,100
‫So our body parse is not really able to handle files

160
00:09:07,100 --> 00:09:09,470
‫and so that's why the file is not showing up

161
00:09:09,470 --> 00:09:11,790
‫in the body at all and of course that

162
00:09:11,790 --> 00:09:15,920
‫is the whole reason why we actually need the Multer package.

163
00:09:15,920 --> 00:09:19,570
‫Anyway, let's now take a look at our folder and so here

164
00:09:19,570 --> 00:09:24,241
‫we have image, users, and then somewhere here

165
00:09:24,241 --> 00:09:26,890
‫should be the image that we just uploaded

166
00:09:28,150 --> 00:09:30,160
‫but I can't really see it here.

167
00:09:30,160 --> 00:09:33,313
‫Let's update, ah and indeed here it is.

168
00:09:34,960 --> 00:09:37,890
‫So if we click it now we cannot really see it

169
00:09:37,890 --> 00:09:39,840
‫because as you can see here it

170
00:09:39,840 --> 00:09:42,600
‫doesn't even have an extension, okay.

171
00:09:42,600 --> 00:09:46,240
‫And so that's why we cannot really open it at this point.

172
00:09:46,240 --> 00:09:49,690
‫So the file really showed up here in our folder

173
00:09:49,690 --> 00:09:52,320
‫and so we have the upload actually working.

174
00:09:52,320 --> 00:09:54,870
‫Well, at least kind of but we're not really

175
00:09:54,870 --> 00:09:57,350
‫where we want it, right.

176
00:09:57,350 --> 00:09:59,960
‫So we want to give it a better file name

177
00:09:59,960 --> 00:10:02,100
‫and we also want to re-organize this

178
00:10:02,100 --> 00:10:04,690
‫code that we have at this point a little bit.

179
00:10:04,690 --> 00:10:07,123
‫And so let's do that in the next video.