1
00:00:03,680 --> 00:00:05,985
In the previous lesson,

2
00:00:05,985 --> 00:00:08,880
we have learnt about how file uploads are

3
00:00:08,880 --> 00:00:12,445
supported through the multi-platform data approach.

4
00:00:12,445 --> 00:00:16,320
In this exercise, we're going to make use of the Multer module,

5
00:00:16,320 --> 00:00:21,885
which we referred to in the lecture to enable our express server

6
00:00:21,885 --> 00:00:27,820
to support uploading of image files into our server site.

7
00:00:27,820 --> 00:00:33,920
They will store these images files into the public/images folder.

8
00:00:33,920 --> 00:00:40,370
This images would be useful within our application when we supply

9
00:00:40,370 --> 00:00:46,690
images for the various dishes or the radars or the promotions,

10
00:00:46,690 --> 00:00:51,490
that we have constructed in our REST API server.

11
00:00:51,490 --> 00:00:54,495
To get started with this exercise,

12
00:00:54,495 --> 00:00:55,770
the first step of course,

13
00:00:55,770 --> 00:01:01,445
is to install the Multer module so at the prompt type npm install

14
00:01:01,445 --> 00:01:10,145
multer minus minus save and at the moment I'm using multer 1.3.1 in this course.

15
00:01:10,145 --> 00:01:12,785
So once we have installed the multer module,

16
00:01:12,785 --> 00:01:21,695
let's go to our project and then implement a new route that enables us to upload files.

17
00:01:21,695 --> 00:01:25,920
Go into the project in the routes folder,

18
00:01:25,920 --> 00:01:33,210
let's add a new file named upload router.js.

19
00:01:33,210 --> 00:01:37,260
This router, express router that we're going to implement here,

20
00:01:37,260 --> 00:01:43,380
is the one that is going to support the uploading of the files.

21
00:01:43,380 --> 00:01:46,250
So, in the upload router let me just go to

22
00:01:46,250 --> 00:01:50,120
the dish router and copy these first few things from the dish router

23
00:01:50,120 --> 00:01:52,550
because we're pretty much going to set up

24
00:01:52,550 --> 00:01:57,440
similar structure in our application or the upload router.

25
00:01:57,440 --> 00:02:00,720
So, let me copy that part and then we will edit that.

26
00:02:00,720 --> 00:02:02,800
So, in the upload router,

27
00:02:02,800 --> 00:02:09,850
I don't need mongoose so I'm going to remove mongoose and I don't need the dishes either.

28
00:02:09,850 --> 00:02:12,755
So, those two would be removed and after that

29
00:02:12,755 --> 00:02:15,935
we need to express body parser and authenticate.

30
00:02:15,935 --> 00:02:25,585
Now, I'm going to require the multer module here.

31
00:02:25,585 --> 00:02:29,280
Once we include the multer module,

32
00:02:29,280 --> 00:02:35,585
now this router I'm going to call this as upload router.

33
00:02:35,585 --> 00:02:42,020
So, will say upload router use body parser and

34
00:02:42,020 --> 00:02:48,040
then this one but the upload router and again,

35
00:02:48,040 --> 00:02:58,110
remember to say module exports, upload router here.

36
00:02:58,110 --> 00:03:00,570
So, for the upload routers route,

37
00:03:00,570 --> 00:03:03,025
we need to add the various methods.

38
00:03:03,025 --> 00:03:07,130
I'm going to do that a little bit later but before that let's set up

39
00:03:07,130 --> 00:03:11,765
multer to enable us to upload the files.

40
00:03:11,765 --> 00:03:19,545
Now, by default, multer can be setup by simply using multer within our application,

41
00:03:19,545 --> 00:03:24,360
but I'm going to do some configuration of multer in

42
00:03:24,360 --> 00:03:28,100
this exercise so that we're going

43
00:03:28,100 --> 00:03:32,615
to customize the way multer handles the upload of the files.

44
00:03:32,615 --> 00:03:35,150
So, to use the multer,

45
00:03:35,150 --> 00:03:43,455
one of the options that multer takes is for the storage.

46
00:03:43,455 --> 00:03:49,295
So, multer provides this disk storage function which

47
00:03:49,295 --> 00:03:56,480
enables us to define the storage engine and in here we can configure a few things.

48
00:03:56,480 --> 00:04:00,409
Now, if it is just a matter of configuring the destination,

49
00:04:00,409 --> 00:04:03,830
you can simply say dest colon,

50
00:04:03,830 --> 00:04:08,810
and then specify the destination folder within which the uploaded files will be stored.

51
00:04:08,810 --> 00:04:15,450
But here I'm going to do some further configuration for the multer module here.

52
00:04:15,450 --> 00:04:19,715
So, this is where I'm going to use the multer disk storage support.

53
00:04:19,715 --> 00:04:22,025
Inside the disk storage,

54
00:04:22,025 --> 00:04:27,080
I can define a couple of options here.

55
00:04:27,080 --> 00:04:32,315
The options that I'm going to define are going to be

56
00:04:32,315 --> 00:04:40,535
destination and the second one is file name.

57
00:04:40,535 --> 00:04:45,725
So, two configurations that I'm going to supply to the disk storage.

58
00:04:45,725 --> 00:04:48,860
The destination as you would expect,

59
00:04:48,860 --> 00:04:56,405
allows me to configure the destination and this takes

60
00:04:56,405 --> 00:05:03,450
as a configuration here a function here.

61
00:05:03,450 --> 00:05:06,980
So, the destination is configured as a function here.

62
00:05:06,980 --> 00:05:14,060
This function will receive request and also an object called the file,

63
00:05:14,060 --> 00:05:16,790
which contains information about the file that has

64
00:05:16,790 --> 00:05:21,930
been processed by multer and also a callback function.

65
00:05:21,930 --> 00:05:24,045
So, cb is the callback function.

66
00:05:24,045 --> 00:05:27,915
So, here for the destination,

67
00:05:27,915 --> 00:05:32,865
I'm going to say cb null,

68
00:05:32,865 --> 00:05:37,054
the second parameter is the destination folder,

69
00:05:37,054 --> 00:05:41,330
which can be expressed as a string where the files will be stored.

70
00:05:41,330 --> 00:05:51,025
So, in here, I'm going to supply the destination as public slash images.

71
00:05:51,025 --> 00:05:54,980
Because in this exercise I'm going to support image uploads.

72
00:05:54,980 --> 00:05:59,865
So, that is the part that I'm going to specify here, so image upload.

73
00:05:59,865 --> 00:06:03,800
So, the callback function as you see takes two parameters.

74
00:06:03,800 --> 00:06:04,820
The first one is, of course,

75
00:06:04,820 --> 00:06:07,460
the error which in this case I'm going to set it to

76
00:06:07,460 --> 00:06:11,335
null and the second one is the destination folder,

77
00:06:11,335 --> 00:06:14,110
where my images are going to be stored.

78
00:06:14,110 --> 00:06:19,010
So, I can configure that by saying public slash images.

79
00:06:19,010 --> 00:06:20,995
So, in the images folder,

80
00:06:20,995 --> 00:06:24,300
the files that I upload will stored.

81
00:06:24,300 --> 00:06:26,370
For the file name also,

82
00:06:26,370 --> 00:06:31,320
it gets the three parameters,

83
00:06:31,320 --> 00:06:35,985
request message, file and the callback function.

84
00:06:35,985 --> 00:06:39,345
From configuring the way the callback function is called,

85
00:06:39,345 --> 00:06:42,140
we can specify information about the file name.

86
00:06:42,140 --> 00:06:47,205
So, for the callback function I would say cb null and there's no error here.

87
00:06:47,205 --> 00:06:51,860
Then the second one insists on the file name,

88
00:06:51,860 --> 00:06:56,430
that is going to be used for the specific file that has just been uploaded,

89
00:06:56,430 --> 00:06:57,975
how it is going to be stored.

90
00:06:57,975 --> 00:07:01,835
So, this file object that I obtained here,

91
00:07:01,835 --> 00:07:08,595
supports a set of several properties on it.

92
00:07:08,595 --> 00:07:11,985
One of the properties is called, original name.

93
00:07:11,985 --> 00:07:14,585
So, the original name essentially,

94
00:07:14,585 --> 00:07:19,475
gives us the original name of the file from the client side that has been uploaded.

95
00:07:19,475 --> 00:07:23,410
I insist that, when the file is saved on the server side,

96
00:07:23,410 --> 00:07:26,380
the file will be given exactly the same name

97
00:07:26,380 --> 00:07:29,710
as the original name of the file that has been uploaded.

98
00:07:29,710 --> 00:07:32,605
So that I can know that I'm uploading

99
00:07:32,605 --> 00:07:35,140
exactly the same file and on the server side when

100
00:07:35,140 --> 00:07:38,200
the file is uploaded will stored with the same name.

101
00:07:38,200 --> 00:07:42,000
Now, if you don't configure this then,

102
00:07:42,000 --> 00:07:45,100
multer by default will give some random string

103
00:07:45,100 --> 00:07:48,130
as the name of the file with no extensions.

104
00:07:48,130 --> 00:07:51,590
So, that may not be something that you would be happy

105
00:07:51,590 --> 00:07:55,290
about using in this particular exercise.

106
00:07:55,290 --> 00:07:58,940
So, that's why I'm explicitly configuring saying that,

107
00:07:58,940 --> 00:08:04,805
the file should be stored with the original name of the file that has been uploaded.

108
00:08:04,805 --> 00:08:08,300
We will again encounter this file object in

109
00:08:08,300 --> 00:08:11,630
a bit more detail and see how we

110
00:08:11,630 --> 00:08:15,245
can make use of information from the file object a little bit later.

111
00:08:15,245 --> 00:08:22,790
In addition, I can also specify a file filter here for the multers configuration.

112
00:08:22,790 --> 00:08:28,145
The file filter will enable me to specify which kind of files

113
00:08:28,145 --> 00:08:33,410
I am willing to upload or that I'm willing to accept for uploading.

114
00:08:33,410 --> 00:08:37,310
So, for doing this I will set up another function called

115
00:08:37,310 --> 00:08:42,480
const image file filter

116
00:08:43,360 --> 00:08:48,755
and this one I will define the function in a minute.

117
00:08:48,755 --> 00:08:51,530
Now, for this, I can also save this as

118
00:08:51,530 --> 00:08:55,580
const storage because we have been using const for everything,

119
00:08:55,580 --> 00:08:57,650
so, I'll just say const storage.

120
00:08:57,650 --> 00:08:59,480
For the image file filter,

121
00:08:59,480 --> 00:09:01,490
I'll say const image file filter.

122
00:09:01,490 --> 00:09:07,725
Again, it receives three parameters request,

123
00:09:07,725 --> 00:09:11,780
object, the file object which contains the information about

124
00:09:11,780 --> 00:09:15,660
the file that has been uploaded and the callback function here.

125
00:09:15,660 --> 00:09:17,260
Through the callback function,

126
00:09:17,260 --> 00:09:22,535
I will pass information back to my multer configuration that

127
00:09:22,535 --> 00:09:27,800
enables me to specify how I'm going to store this information.

128
00:09:27,800 --> 00:09:30,590
So, this is going to be an arrow function here.

129
00:09:30,590 --> 00:09:35,800
Inside this arrow function what I will check for is that,

130
00:09:35,800 --> 00:09:45,405
I'll say if not file original name match.

131
00:09:45,405 --> 00:09:49,340
So, the original name is a string here.

132
00:09:49,340 --> 00:09:55,780
So, I'm trying to see if there is a match for that string by saying,

133
00:09:55,780 --> 00:09:58,260
inside here a regular expression.

134
00:09:58,260 --> 00:10:01,570
So, the regular expression I will specify it as slash,

135
00:10:01,570 --> 00:10:05,505
backslash dot and then,

136
00:10:05,505 --> 00:10:09,565
the options that I'm going to specify is jpg

137
00:10:09,565 --> 00:10:15,530
or jpeg or

138
00:10:15,530 --> 00:10:22,260
png or gif.

139
00:10:25,250 --> 00:10:31,575
So, that is how I specify the regular expression there.

140
00:10:31,575 --> 00:10:32,785
To say that okay,

141
00:10:32,785 --> 00:10:38,515
if the file's extension contains jpg or jpeg or png or gif,

142
00:10:38,515 --> 00:10:44,630
then I will treat that as an image file and I will be willing to accept those files.

143
00:10:44,630 --> 00:10:47,225
So, that is what we are testing here.

144
00:10:47,225 --> 00:10:49,690
If that is the case,

145
00:10:49,690 --> 00:10:54,920
that is if the file extension does not match any of these things, so,

146
00:10:54,920 --> 00:11:02,460
that's why we're seeing not then we'll say, return cb.

147
00:11:02,460 --> 00:11:07,890
Then, notice that, the cb the first parameter would be an error.

148
00:11:07,890 --> 00:11:12,150
So, I will return a new error

149
00:11:12,150 --> 00:11:18,375
saying you can upload only image files.

150
00:11:18,375 --> 00:11:23,195
So, we are insisting that the only files that they will

151
00:11:23,195 --> 00:11:28,565
accept are image files and the second parameter would be false.

152
00:11:28,565 --> 00:11:32,240
Because we are supplying the error as the first parameter,

153
00:11:32,240 --> 00:11:35,460
the second parameter is set to false.

154
00:11:36,620 --> 00:11:44,340
The otherwise is saying cb null true.

155
00:11:44,340 --> 00:11:49,840
So, which means that the file that is trying to be

156
00:11:49,840 --> 00:11:55,440
uploaded matches the pattern and so It is an image file,

157
00:11:55,440 --> 00:11:57,955
and so we're willing to let it be uploaded.

158
00:11:57,955 --> 00:12:03,410
Two configurations that we are going to supply to that multer module.

159
00:12:03,410 --> 00:12:07,475
How do we configure the multer module for use within our application?

160
00:12:07,475 --> 00:12:12,489
This is where I will declare const upload

161
00:12:12,489 --> 00:12:19,300
as multer and then I would specify in brackets that options here.

162
00:12:19,300 --> 00:12:27,790
I can specify the storage as the storage function that I've just defined here.

163
00:12:27,790 --> 00:12:31,645
This storage function as the first parameter,

164
00:12:31,645 --> 00:12:35,625
and the second parameter is a file filter.

165
00:12:35,625 --> 00:12:40,335
A file filter is a method that enables me to specify

166
00:12:40,335 --> 00:12:46,760
which kind of file that I'm willing to accept and then so I will say, image file filter.

167
00:12:46,760 --> 00:12:48,890
Just toggle the word wrap,

168
00:12:48,890 --> 00:12:51,860
so that you can see the entire line here.

169
00:12:51,860 --> 00:12:57,045
So, it say you can upload only image files and then for the multer,

170
00:12:57,045 --> 00:13:01,750
I am configuring the image filter, that's it.

171
00:13:01,750 --> 00:13:10,435
My multer module is now configured to enable me to upload the image files here.

172
00:13:10,435 --> 00:13:15,115
Then let's now go ahead and configure the upload router.

173
00:13:15,115 --> 00:13:16,670
For the upload router,

174
00:13:16,670 --> 00:13:20,325
I'm going to allow only the post method here.

175
00:13:20,325 --> 00:13:21,910
So the get, put,

176
00:13:21,910 --> 00:13:30,125
and delete methods will not be allowed on the upload router endpoint.

177
00:13:30,125 --> 00:13:32,130
To help me do that,

178
00:13:32,130 --> 00:13:38,270
I'll go to the dish router and then recall that we had the put configured here already.

179
00:13:38,270 --> 00:13:42,230
I'm going to copy that and then come to

180
00:13:42,230 --> 00:13:47,730
the upload router and then I will paste that information here.

181
00:13:47,730 --> 00:13:53,500
We'll say, if it is a get operation then I am not going

182
00:13:53,500 --> 00:14:02,230
to support that on the endpoint would be imageUpload.

183
00:14:02,580 --> 00:14:05,545
The get will not be allowed,

184
00:14:05,545 --> 00:14:13,040
and similarly the put will not be allowed,

185
00:14:13,710 --> 00:14:20,000
and also delete will not be allowed.

186
00:14:20,640 --> 00:14:31,310
I'm not going to support any of these operations, so put, delete.

187
00:14:31,310 --> 00:14:33,555
These three will not be allowed.

188
00:14:33,555 --> 00:14:40,030
The only method that I'm going to support is the post method.

189
00:14:40,030 --> 00:14:41,920
For the post method,

190
00:14:41,920 --> 00:14:47,950
we're going to do this authentication all the way up to that point.

191
00:14:47,950 --> 00:14:50,560
I'm just going to copy that in there,

192
00:14:50,560 --> 00:14:57,205
close that endpoint and for the post.

193
00:14:57,205 --> 00:14:59,125
When a file is posted,

194
00:14:59,125 --> 00:15:03,035
how do we handle this post?

195
00:15:03,035 --> 00:15:06,320
To handle the post here,

196
00:15:06,320 --> 00:15:09,885
I don't need the next for this.

197
00:15:09,885 --> 00:15:15,485
Now, in addition to the authenticate verifyUser and authenticate verifyAdmin,

198
00:15:15,485 --> 00:15:21,280
on the same line I will configure the upload.

199
00:15:21,280 --> 00:15:27,270
So, recall that I had configured upload by using multer here.

200
00:15:27,270 --> 00:15:29,790
So, I'm going to make use of the upload which

201
00:15:29,790 --> 00:15:34,200
supports a function called as upload.single.

202
00:15:34,200 --> 00:15:42,400
This single function takes as parameter.

203
00:15:42,400 --> 00:15:49,630
The name of the form field which specifies that file,

204
00:15:49,630 --> 00:15:52,300
you will see that in a short while.

205
00:15:52,300 --> 00:16:01,930
This form field I will name it as imageFile here.

206
00:16:01,930 --> 00:16:09,455
Upload single means that it is going to allow me to upload only a single file here.

207
00:16:09,455 --> 00:16:15,065
That single file will specify in the upload form from the client side

208
00:16:15,065 --> 00:16:21,730
in the multi-part form upload by using that name there.

209
00:16:21,860 --> 00:16:26,525
When the file is obtained in the code,

210
00:16:26,525 --> 00:16:28,060
if I come up to this point,

211
00:16:28,060 --> 00:16:32,290
this upload will take care of handling the errors if there are any,

212
00:16:32,290 --> 00:16:36,585
if the file is not properly uploaded and so on.

213
00:16:36,585 --> 00:16:38,315
When you come up to this point,

214
00:16:38,315 --> 00:16:40,630
the file would have been successfully uploaded and

215
00:16:40,630 --> 00:16:43,510
so you need to handle the uploaded file.

216
00:16:43,510 --> 00:16:52,750
At this point, we will say res.statusCode is

217
00:16:52,750 --> 00:17:02,780
200 and then res.setHeader Content-Type,

218
00:17:12,240 --> 00:17:18,920
'application/json'. What I'm going to do here is that,

219
00:17:19,920 --> 00:17:30,060
we will pass back this req.file object from the server back to the client.

220
00:17:30,060 --> 00:17:36,570
This req.file object will also contain the path to the file in there and that path can be

221
00:17:36,570 --> 00:17:39,890
used by the client to configure any place

222
00:17:39,890 --> 00:17:43,735
where it needs to know the location of this image file.

223
00:17:43,735 --> 00:17:47,355
For example, if you are trying to upload a dish

224
00:17:47,355 --> 00:17:51,060
to the server side and the details of the dish to the server side,

225
00:17:51,060 --> 00:17:53,700
you might upload the image to the server and then

226
00:17:53,700 --> 00:17:56,230
you get back the URL of that image and then you maybe

227
00:17:56,230 --> 00:18:02,315
including the URL of that image into the json object that describes the dish.

228
00:18:02,315 --> 00:18:09,675
Then upload the dish json document to the server side.

229
00:18:09,675 --> 00:18:12,805
Then the req.file is passed back to the client,

230
00:18:12,805 --> 00:18:18,190
the req.file as you will see when we run this server,

231
00:18:18,190 --> 00:18:20,670
the req.file contains a lot of information about

232
00:18:20,670 --> 00:18:23,370
the file that has just been uploaded and so I'm going to

233
00:18:23,370 --> 00:18:29,700
examine that to obtain information about the file that I just uploaded.

234
00:18:29,910 --> 00:18:38,405
This is how we're going to be configuring the post method there, that is it.

235
00:18:38,405 --> 00:18:44,330
My upload router is all ready to accept uploads of the files.

236
00:18:44,330 --> 00:18:51,440
Now, all that I need to do is to go to app.js and then configure the upload router.

237
00:18:51,440 --> 00:18:53,335
So, going to app.js

238
00:18:53,335 --> 00:18:55,550
We already have all these routers.

239
00:18:55,550 --> 00:19:00,350
So, let me just copy their leaderRouter and then

240
00:19:00,350 --> 00:19:07,475
configure this as uploadRouter.

241
00:19:07,475 --> 00:19:14,150
So, this is in the uploadRouter file here.

242
00:19:14,150 --> 00:19:18,965
So, we'll configure the uploadRouter and then going down below here,

243
00:19:18,965 --> 00:19:28,010
we will now configure the imageUpload endpoint.

244
00:19:28,010 --> 00:19:32,525
So, the imageUpload endpoint allows me to upload the file.

245
00:19:32,525 --> 00:19:37,880
So, this would be uploadRouter. That's it.

246
00:19:37,880 --> 00:19:44,740
My application is now configured to accept file uploads.

247
00:19:44,740 --> 00:19:51,130
So, let's save the changes and then go and take a look at how our application works.

248
00:19:51,130 --> 00:19:53,700
Going back to the Terminal,

249
00:19:53,700 --> 00:19:58,310
now make sure that you have your MongoDB server up and running in

250
00:19:58,310 --> 00:20:03,020
one of the Terminal tabs or in one of the command Windows.

251
00:20:03,020 --> 00:20:04,640
In the other window,

252
00:20:04,640 --> 00:20:09,210
let's start the server.

253
00:20:09,210 --> 00:20:12,455
Once our server is up and running,

254
00:20:12,455 --> 00:20:20,120
we will go to Postman and then send or rather upload a file from Postman.

255
00:20:20,120 --> 00:20:22,435
So, as I mentioned,

256
00:20:22,435 --> 00:20:24,090
to upload a file,

257
00:20:24,090 --> 00:20:26,920
you will be using the multipart/form-data.

258
00:20:26,920 --> 00:20:29,865
So, first, let me log myself in.

259
00:20:29,865 --> 00:20:33,560
So, I will do a post on local users login,

260
00:20:33,560 --> 00:20:36,140
and I will log myself in as the admin because

261
00:20:36,140 --> 00:20:38,815
only the admin can upload their files there.

262
00:20:38,815 --> 00:20:45,350
Recall that your server is now running at the secure port.

263
00:20:45,350 --> 00:20:52,580
So, we'll say https://localhost:3443,

264
00:20:52,580 --> 00:20:56,090
and there's no authorization in here.

265
00:20:56,090 --> 00:21:03,235
So, let me turn off the authorization in here and then send the request to the server.

266
00:21:03,235 --> 00:21:06,005
So, in Postman, if this is happening,

267
00:21:06,005 --> 00:21:09,790
that it says could not get any response,

268
00:21:09,790 --> 00:21:15,025
this is because you're now running the secure server.

269
00:21:15,025 --> 00:21:17,095
So, in that case,

270
00:21:17,095 --> 00:21:23,170
Postman will not accept the self-signed certificate that is coming in.

271
00:21:23,170 --> 00:21:28,790
So, in that case, open settings here and in the settings,

272
00:21:28,790 --> 00:21:31,360
under the general settings field,

273
00:21:31,360 --> 00:21:34,765
you will see this SSL certificate verification.

274
00:21:34,765 --> 00:21:38,580
Turn that off so that your Postman will be willing to accept

275
00:21:38,580 --> 00:21:43,975
the self-signed certificate that we have installed on the server-side.

276
00:21:43,975 --> 00:21:47,450
So, this is how you will be able to contact your server at

277
00:21:47,450 --> 00:21:53,300
the https://localhost:3443 user login endpoint.

278
00:21:53,300 --> 00:21:55,775
So, when we try to login now,

279
00:21:55,775 --> 00:21:59,750
you will now see that your post request has been

280
00:21:59,750 --> 00:22:03,035
successfully accepted by the server

281
00:22:03,035 --> 00:22:06,275
and then the server replies with the token information.

282
00:22:06,275 --> 00:22:12,515
So, again, to ensure that Postman allows you to contact the secure server,

283
00:22:12,515 --> 00:22:16,264
click on Settings and under General,

284
00:22:16,264 --> 00:22:20,645
turn off the SSL certificate validation.

285
00:22:20,645 --> 00:22:23,195
So, once you login,

286
00:22:23,195 --> 00:22:25,605
let's copy the token here.

287
00:22:25,605 --> 00:22:28,290
So, I'm going to copy the token here.

288
00:22:28,290 --> 00:22:31,000
Now, let's try to upload the file.

289
00:22:31,000 --> 00:22:34,215
To upload the file, as you noticed,

290
00:22:34,215 --> 00:22:36,830
we need to upload this file at localhost:3443,

291
00:22:36,830 --> 00:22:46,080
and the endpoint is imageUpload.

292
00:22:47,680 --> 00:22:51,200
For doing the imageUpload here,

293
00:22:51,200 --> 00:22:57,360
in the Header, we need to configure the authorization.

294
00:22:57,490 --> 00:23:00,560
So, we'll configure authorization,

295
00:23:00,560 --> 00:23:03,035
and then you'll say,

296
00:23:03,035 --> 00:23:08,820
"Bearer", and supply the a token that we have obtained.

297
00:23:08,820 --> 00:23:14,785
So, keep a copy of the token somewhere and copy in the token into the Header.

298
00:23:14,785 --> 00:23:18,260
In the Body, to upload a file,

299
00:23:18,260 --> 00:23:20,030
we will use this form-data.

300
00:23:20,030 --> 00:23:24,020
So, this is what allows you to do the multipart/form-data here.

301
00:23:24,020 --> 00:23:26,625
So, when you click on the form-data,

302
00:23:26,625 --> 00:23:32,310
here you can supply that file here that you wanted to upload.

303
00:23:32,310 --> 00:23:36,040
So, when you click a new key here,

304
00:23:37,870 --> 00:23:43,040
use this key as imageFile.

305
00:23:43,040 --> 00:23:52,695
Recall that when we configured the post method on the uploadRouter site,

306
00:23:52,695 --> 00:23:56,515
we specified saying upload single an imageFile.

307
00:23:56,515 --> 00:23:59,670
So, that's the same key that you're going to be using here.

308
00:23:59,670 --> 00:24:03,410
Then, when you give the key,

309
00:24:03,410 --> 00:24:05,270
then the second part,

310
00:24:05,270 --> 00:24:09,875
you will set this from Text to File here.

311
00:24:09,875 --> 00:24:15,595
So, this is what allows you to specify the file as the value for this particular key.

312
00:24:15,595 --> 00:24:20,045
So, then you will see this button coming up saying, "Choose Files."

313
00:24:20,045 --> 00:24:25,505
So, you can open that and then select a file that you want to upload.

314
00:24:25,505 --> 00:24:30,060
So, here, I'm going to go to my,

315
00:24:30,160 --> 00:24:37,470
I have a file in one of my folders here.

316
00:24:37,470 --> 00:24:41,685
So, I'm just going to go into assets images,

317
00:24:41,685 --> 00:24:46,640
and then we'll just upload a PNG file from here.

318
00:24:46,640 --> 00:24:48,230
So, you can say,

319
00:24:48,230 --> 00:24:50,280
"Upload the specific file."

320
00:24:50,280 --> 00:24:52,100
So, as you recall,

321
00:24:52,100 --> 00:24:56,020
we configured our server to only accept imageFile.

322
00:24:56,020 --> 00:24:58,720
So, we'll say, "Upload that particular file."

323
00:24:58,720 --> 00:25:03,050
Then when you click on the Send button,

324
00:25:03,050 --> 00:25:04,940
so notice that in the body,

325
00:25:04,940 --> 00:25:07,145
you have to configure this with form-data.

326
00:25:07,145 --> 00:25:11,240
So, the multipart/form-data, and then the key is the imageFile,

327
00:25:11,240 --> 00:25:15,440
and the value is the file that you just selected,

328
00:25:15,440 --> 00:25:17,575
and then click on the Send button.

329
00:25:17,575 --> 00:25:19,940
So, when you click on the Send button,

330
00:25:19,940 --> 00:25:23,670
the file will be uploaded to your server-side and

331
00:25:23,670 --> 00:25:27,770
then the server will reply back with this object.

332
00:25:27,770 --> 00:25:29,770
So, this is what is contained in the

333
00:25:29,770 --> 00:25:34,820
req.file object that is there on the request object here.

334
00:25:34,820 --> 00:25:38,250
So, this req.file, as you see, contains a fieldname.

335
00:25:38,250 --> 00:25:39,590
Fieldname is imageFile.

336
00:25:39,590 --> 00:25:43,200
So, notice that this is exactly the same as this one here.

337
00:25:43,200 --> 00:25:50,290
The originalname, so notice that the originalname expression contains alberto.png,

338
00:25:50,290 --> 00:25:52,915
which is the file that I uploaded.

339
00:25:52,915 --> 00:25:56,250
Now you can see why when I configured

340
00:25:56,250 --> 00:26:00,905
the storage and the filename, I set file.originalname.

341
00:26:00,905 --> 00:26:03,515
So, this is what is going to be used there.

342
00:26:03,515 --> 00:26:05,410
You can see the encoding type,

343
00:26:05,410 --> 00:26:08,745
and the mimetype, and the destination,

344
00:26:08,745 --> 00:26:10,995
which folder the file has been put into,

345
00:26:10,995 --> 00:26:13,060
and the actual path of the file here,

346
00:26:13,060 --> 00:26:18,240
the relative path from the root of the server folder here.

347
00:26:18,240 --> 00:26:23,555
So, this path indicates where the file is accessible on the server-side.

348
00:26:23,555 --> 00:26:29,865
So, if you are configuring the details of a dish or a leader, for example,

349
00:26:29,865 --> 00:26:37,490
you would simply use the image property of the leader to images/alberto.png.

350
00:26:37,490 --> 00:26:40,390
Public should not be used anyway because the public folder is

351
00:26:40,390 --> 00:26:43,420
the one that is acting as the root folder for our server.

352
00:26:43,420 --> 00:26:46,560
So, you just need to supply these images.alberto.

353
00:26:46,560 --> 00:26:49,475
So, from this path that you obtain,

354
00:26:49,475 --> 00:26:52,685
once the file is successfully uploaded,

355
00:26:52,685 --> 00:26:58,130
extract this part and then use that for the image in

356
00:26:58,130 --> 00:27:04,265
your JSON document that describes the specific leader.

357
00:27:04,265 --> 00:27:09,260
So, that's the way we upload a file.

358
00:27:09,260 --> 00:27:11,985
Now, to convince you that the fine actually got uploaded,

359
00:27:11,985 --> 00:27:14,375
let's go to our project.

360
00:27:14,375 --> 00:27:16,655
Going to our project,

361
00:27:16,655 --> 00:27:22,215
in the public folder,

362
00:27:22,215 --> 00:27:26,325
you can now see that there is an images sub folder there.

363
00:27:26,325 --> 00:27:28,120
In the images sub folder,

364
00:27:28,120 --> 00:27:32,785
you can see the alberta.png file uploaded in there.

365
00:27:32,785 --> 00:27:37,635
Now, we can upload more imageFiles into our server-side.

366
00:27:37,635 --> 00:27:40,425
Now, if you try to upload a non-imageFile,

367
00:27:40,425 --> 00:27:42,980
you would see that the server will not accept

368
00:27:42,980 --> 00:27:46,660
a non-imageFile and then will reply back saying,

369
00:27:46,660 --> 00:27:49,180
"Cannot accept the non-imageFile."

370
00:27:49,180 --> 00:27:54,050
So, this is how we will configure our express server

371
00:27:54,050 --> 00:27:59,390
to accept uploads of imageFiles from our client-side.

372
00:27:59,390 --> 00:28:03,065
With this, we complete this exercise.

373
00:28:03,065 --> 00:28:05,400
In this exercise, we have seen how we use

374
00:28:05,400 --> 00:28:09,840
the meta module to configure our express server to

375
00:28:09,840 --> 00:28:17,735
accept file uploads on a /imageUpload Rest API endpoint.

376
00:28:17,735 --> 00:28:19,840
When we post to the endpoint,

377
00:28:19,840 --> 00:28:25,585
the file gets uploaded to a specified folder on the server site.

378
00:28:25,585 --> 00:28:27,900
With this, we complete this exercise.

379
00:28:27,900 --> 00:28:34,890
This is a good time for you to do a git commit with the message 'file upload'.