1
00:00:02,130 --> 00:00:04,810
So let's move to the server side now,

2
00:00:04,810 --> 00:00:07,080
for this file upload.

3
00:00:07,080 --> 00:00:07,913
And for this, of course,

4
00:00:07,913 --> 00:00:10,930
we got the app.js file in our routes.

5
00:00:10,930 --> 00:00:14,360
Now, before we dig into the file upload part,

6
00:00:14,360 --> 00:00:18,770
let's think about how we parsed and handled incoming data

7
00:00:18,770 --> 00:00:22,590
as long as we didn't deal with files.

8
00:00:22,590 --> 00:00:27,300
And there, this middleware played an important role.

9
00:00:27,300 --> 00:00:31,430
This urlencoded middleware that's built into express,

10
00:00:31,430 --> 00:00:32,310
actually parses incoming requests and extracts request data

11
00:00:32,310 --> 00:00:33,143
that might be attached to those requests.

12
00:00:33,143 --> 00:00:33,976
And this name URL encoded always was a bit strange,

13
00:00:33,976 --> 00:00:38,976
it might make more sense now that you know

14
00:00:47,240 --> 00:00:50,700
that the default mode for encoding forum data

15
00:00:50,700 --> 00:00:55,700
is this X www urlencoded value.

16
00:00:56,030 --> 00:00:58,740
So that's why this middleware was called like this,

17
00:00:58,740 --> 00:01:01,220
because this was dealing with data

18
00:01:01,220 --> 00:01:03,994
that was encoded in that mode.

19
00:01:03,994 --> 00:01:07,023
So with that urlencoded data.

20
00:01:08,230 --> 00:01:10,130
Now that also, however,

21
00:01:10,130 --> 00:01:12,450
tells us that it's probably not able

22
00:01:12,450 --> 00:01:17,450
to deal with multi-part form data, which does include files.

23
00:01:18,250 --> 00:01:21,130
We had to switch to encoding mode after all.

24
00:01:21,130 --> 00:01:22,360
And this middleware

25
00:01:22,360 --> 00:01:25,430
is now not able to deal with data anymore.

26
00:01:25,430 --> 00:01:29,143
So no problem, we just had a different middleware.

27
00:01:30,690 --> 00:01:32,270
In the end it's that simple.

28
00:01:32,270 --> 00:01:35,450
However, now there isn't a built in one in express,

29
00:01:35,450 --> 00:01:37,823
but we'll have to use a third party package.

30
00:01:38,760 --> 00:01:42,230
Now there is a wide variety of packages you can use

31
00:01:42,230 --> 00:01:46,800
for dealing with file uploads in node express applications,

32
00:01:46,800 --> 00:01:49,330
but one of the most popular ones

33
00:01:49,330 --> 00:01:52,773
and a package that's very easy to use is milter.

34
00:01:53,870 --> 00:01:56,720
You can search for milter to find it's NPM

35
00:01:56,720 --> 00:01:58,840
or it's GitHub page.

36
00:01:58,840 --> 00:02:01,580
GitHub is basically where its code is stored

37
00:02:01,580 --> 00:02:03,770
since it's a open source project,

38
00:02:03,770 --> 00:02:06,530
which means everyone can view the source code.

39
00:02:06,530 --> 00:02:10,060
Most third-party packages are open source by the way.

40
00:02:10,060 --> 00:02:14,230
And this is a package, a middleware for express.js,

41
00:02:14,230 --> 00:02:18,440
which we can use for handling multipart/form.data

42
00:02:18,440 --> 00:02:22,620
as they tell us here in the description of the package.

43
00:02:22,620 --> 00:02:25,870
And that's great because that's exactly what we need.

44
00:02:25,870 --> 00:02:27,760
So we can install this package

45
00:02:27,760 --> 00:02:30,420
with this command here in the end,

46
00:02:30,420 --> 00:02:34,430
and then we can configure and use it as described here

47
00:02:34,430 --> 00:02:37,160
in their own description.

48
00:02:37,160 --> 00:02:38,740
Now, feel free to go through that.

49
00:02:38,740 --> 00:02:40,810
If you wanna dive into all the details,

50
00:02:40,810 --> 00:02:44,060
but I'll show you some key aspects for all this section

51
00:02:44,060 --> 00:02:45,813
and in this course in general.

52
00:02:47,150 --> 00:02:48,600
So, first of all, let's go back

53
00:02:48,600 --> 00:02:50,700
and stop this running server here,

54
00:02:50,700 --> 00:02:55,060
to run this npm install --save milter command here

55
00:02:55,060 --> 00:02:58,563
to install this milter package into our project here,

56
00:03:00,400 --> 00:03:02,800
because that's step number one.

57
00:03:02,800 --> 00:03:06,623
Thereafter, we can restart this server with npm start.

58
00:03:07,910 --> 00:03:11,920
Now we just use this middleware a little bit differently,

59
00:03:11,920 --> 00:03:16,210
then we use the urlencoded middleware.

60
00:03:16,210 --> 00:03:20,420
We're not going to apply it to all the incoming requests,

61
00:03:20,420 --> 00:03:23,920
instead, we're only going to apply it to the requests.

62
00:03:23,920 --> 00:03:28,920
So on the routes where we do expect files to be uploaded.

63
00:03:30,110 --> 00:03:32,130
And that means that first of all,

64
00:03:32,130 --> 00:03:34,530
in the users.js routes file here,

65
00:03:34,530 --> 00:03:36,880
we have to register a new route,

66
00:03:36,880 --> 00:03:38,723
which handles the form submission.

67
00:03:39,980 --> 00:03:41,950
Keep in mind that in that form,

68
00:03:41,950 --> 00:03:46,530
we are sending a POST request to /profiles.

69
00:03:46,530 --> 00:03:49,150
So we should register as such a route here,

70
00:03:49,150 --> 00:03:52,193
a post request to /profiles.

71
00:03:53,120 --> 00:03:55,760
And then here, we got our function

72
00:03:55,760 --> 00:03:58,973
that should handle incoming requests to that route.

73
00:04:01,130 --> 00:04:05,040
Now, this is a route where we expect a file to be attached

74
00:04:05,040 --> 00:04:07,070
and therefore that's a route

75
00:04:07,070 --> 00:04:10,930
where we wanna apply this milter middleware to.

76
00:04:10,930 --> 00:04:11,763
And for this,

77
00:04:11,763 --> 00:04:15,130
I'm going to show you a new way of adding middlewares

78
00:04:15,130 --> 00:04:18,660
that you haven't seen before, but that's also quite common,

79
00:04:18,660 --> 00:04:20,709
especially for cases like this.

80
00:04:20,709 --> 00:04:23,240
So that's quite helpful for scenarios

81
00:04:23,240 --> 00:04:27,280
where a middleware should not be applied to all requests,

82
00:04:27,280 --> 00:04:29,503
but just some requests.

83
00:04:30,860 --> 00:04:33,730
First of all, here in users.js,

84
00:04:33,730 --> 00:04:38,730
we start by simply importing milter by requiring milter

85
00:04:39,000 --> 00:04:42,310
just as we required other packages before,

86
00:04:42,310 --> 00:04:44,213
as well in this course like this.

87
00:04:46,470 --> 00:04:48,400
Then once we did this,

88
00:04:48,400 --> 00:04:52,310
we can execute milter as a function actually,

89
00:04:52,310 --> 00:04:57,140
just as we executed express as a function in the app.js file

90
00:04:57,980 --> 00:05:02,160
here, we execute milter as a function now

91
00:05:02,160 --> 00:05:06,970
and queue this function we pass a configuration object

92
00:05:06,970 --> 00:05:09,850
where we can configure that behavior of milter.

93
00:05:09,850 --> 00:05:12,710
For example, where it should store the files.

94
00:05:12,710 --> 00:05:14,010
We'll do this in a second.

95
00:05:15,140 --> 00:05:18,680
This will give us a upload middleware.

96
00:05:18,680 --> 00:05:22,410
And if we now wanna apply that to only one specific route,

97
00:05:22,410 --> 00:05:24,660
we can a the express.js feature

98
00:05:24,660 --> 00:05:26,523
that allows us to do just that.

99
00:05:27,490 --> 00:05:31,250
We can go to the route where we wanna apply our middleware,

100
00:05:31,250 --> 00:05:33,220
and after the path,

101
00:05:33,220 --> 00:05:36,540
before we have our route handling function here,

102
00:05:36,540 --> 00:05:39,623
we can now simply add an extra parameter value.

103
00:05:40,550 --> 00:05:44,610
It turns out that for all these express routes,

104
00:05:44,610 --> 00:05:49,280
you can add an unlimited list of middleware functions.

105
00:05:49,280 --> 00:05:52,950
Thus far, we always only added one,

106
00:05:52,950 --> 00:05:55,560
our final route handling function,

107
00:05:55,560 --> 00:05:59,503
which turns out to all be a middleware function technically.

108
00:06:00,460 --> 00:06:02,320
Now, we don't just wanna have that,

109
00:06:02,320 --> 00:06:04,970
but an additional middle-ware function here,

110
00:06:04,970 --> 00:06:09,120
which we simply add as an extra parameter value.

111
00:06:09,120 --> 00:06:11,800
And the order of values matters here

112
00:06:11,800 --> 00:06:15,090
because they are executed from left to right.

113
00:06:15,090 --> 00:06:17,540
And I want my own route handling function

114
00:06:17,540 --> 00:06:19,110
to be executed last,

115
00:06:19,110 --> 00:06:22,210
so I'll put it as a last parameter value.

116
00:06:22,210 --> 00:06:25,370
And before debt, after the path here,

117
00:06:25,370 --> 00:06:28,303
I'll add this milter middleware function.

118
00:06:29,370 --> 00:06:32,660
However, actually we don't use upload like this.

119
00:06:32,660 --> 00:06:36,440
It technically isn't the function itself, it's an object

120
00:06:36,440 --> 00:06:39,670
that contains a bunch of middleware functions.

121
00:06:39,670 --> 00:06:42,150
And to be precise, it contains functions

122
00:06:42,150 --> 00:06:46,430
for accepting an array of files or a single file.

123
00:06:46,430 --> 00:06:50,130
And here I'm expecting a single file to be uploaded.

124
00:06:50,130 --> 00:06:55,130
So we call upload single and to upload single,

125
00:06:55,310 --> 00:06:59,763
we pass the name of the input field that will hold the file.

126
00:07:01,700 --> 00:07:03,130
So in my case here,

127
00:07:03,130 --> 00:07:07,260
that's the name assigned to this input of type file

128
00:07:07,260 --> 00:07:08,963
image in this case.

129
00:07:10,180 --> 00:07:13,210
So this name, the value of this name

130
00:07:13,210 --> 00:07:16,580
is what we now pass here to this single function,

131
00:07:16,580 --> 00:07:18,760
to this single method.

132
00:07:18,760 --> 00:07:22,530
And this will then return a middleware function

133
00:07:22,530 --> 00:07:26,210
that will be executed on all incoming requests

134
00:07:26,210 --> 00:07:28,333
that are received by this route.

135
00:07:29,550 --> 00:07:32,450
So this year we'll ensure that for requests

136
00:07:32,450 --> 00:07:34,360
that are received by this route,

137
00:07:34,360 --> 00:07:37,260
milter will look into that request.

138
00:07:37,260 --> 00:07:41,090
And if there is such an image file attached to that request,

139
00:07:41,090 --> 00:07:44,020
it will give us access to that file.

140
00:07:44,020 --> 00:07:47,993
It will also give us access to all the other forum fields

141
00:07:47,993 --> 00:07:50,470
like in this case, the username.

142
00:07:50,470 --> 00:07:52,460
So milter --2,

143
00:07:52,460 --> 00:07:55,313
but in addition, it gives us access to the file.

144
00:07:56,160 --> 00:07:58,740
And therefore we only wanna use it on the route

145
00:07:58,740 --> 00:08:00,610
where the file is expected

146
00:08:00,610 --> 00:08:03,180
instead of handling all routes with it,

147
00:08:03,180 --> 00:08:04,760
because we need to tell milter

148
00:08:04,760 --> 00:08:07,283
what the name of that file field will be.

149
00:08:09,270 --> 00:08:13,170
And with that, we now will get access to that file

150
00:08:13,170 --> 00:08:15,720
through this request object.

151
00:08:15,720 --> 00:08:18,530
There, we already learned that request body

152
00:08:18,530 --> 00:08:21,160
could be used to get access to the overall data

153
00:08:21,160 --> 00:08:23,050
that's attached to the request.

154
00:08:23,050 --> 00:08:24,800
And that will still be true

155
00:08:24,800 --> 00:08:28,570
for all the non file data for the file.

156
00:08:28,570 --> 00:08:31,060
There will be a req.file

157
00:08:31,060 --> 00:08:33,400
and that will then be the file

158
00:08:33,400 --> 00:08:35,433
that was parsed from that request.

159
00:08:36,520 --> 00:08:38,370
So here we got the uploadedImageFile,

160
00:08:40,780 --> 00:08:42,363
and then we got the userData,

161
00:08:45,060 --> 00:08:48,050
which is the other data stored in the body.

162
00:08:48,050 --> 00:08:51,010
In this case that will, of course only be one property,

163
00:08:51,010 --> 00:08:52,670
the username property,

164
00:08:52,670 --> 00:08:54,620
because that's the only other input field

165
00:08:54,620 --> 00:08:55,803
I have in this form.

166
00:08:58,690 --> 00:09:02,960
That's now how we get access to that uploaded file.

167
00:09:02,960 --> 00:09:05,430
However, we're not entirely there yet,

168
00:09:05,430 --> 00:09:09,190
because what Multer will do for us conveniently is,

169
00:09:09,190 --> 00:09:11,660
it will not just give us access to that file,

170
00:09:11,660 --> 00:09:13,830
it will also automatically store it

171
00:09:13,830 --> 00:09:17,180
somewhere on our hard drive on our server side here.

172
00:09:17,180 --> 00:09:19,510
So in this server side project,

173
00:09:19,510 --> 00:09:21,810
so that we don't have to move that file

174
00:09:21,810 --> 00:09:24,860
or store that file somewhere manually

175
00:09:24,860 --> 00:09:28,283
because that's the other important part, the file storage.