1
00:00:00,330 --> 00:00:05,400
In this lesson you're going to learn how to add validation to the files that are being uploaded to your

2
00:00:05,400 --> 00:00:06,070
server.

3
00:00:06,240 --> 00:00:08,700
So there are two main things we want to validate.

4
00:00:08,700 --> 00:00:13,160
One is the file size and the second is the file type.

5
00:00:13,200 --> 00:00:17,820
So when it comes to the file size I want to restrict it to some capacity.

6
00:00:17,850 --> 00:00:24,480
I don't want to allow for a two gigabyte file to be uploaded for something simple like a profile picture.

7
00:00:24,480 --> 00:00:28,260
In that case a one or two megabyte limit would be plenty.

8
00:00:28,260 --> 00:00:30,240
So we'll learn how to restrict that.

9
00:00:30,270 --> 00:00:33,980
We'll also learn how to restrict the uploads by their file type.

10
00:00:33,990 --> 00:00:40,260
So for this end point I might want to require that only PD Fs are uploaded and for the Avatar end point

11
00:00:40,470 --> 00:00:43,650
I might want to require that an image is uploaded.

12
00:00:43,710 --> 00:00:46,110
We'll learn how to configure that as well.

13
00:00:46,110 --> 00:00:52,080
Now everything we set up is going to be configured right here on this options object that we pass to

14
00:00:52,080 --> 00:00:52,970
Mulder.

15
00:00:53,010 --> 00:00:57,210
Let's start by restricting the file size on the multiple object.

16
00:00:57,210 --> 00:01:04,290
We have a another property we can set up alongside of dest called limits now limits itself is an object

17
00:01:04,290 --> 00:01:06,110
because there are multiple different limits.

18
00:01:06,120 --> 00:01:13,380
We can set but the most popular and the only one we're actually going to use in the course is file size.

19
00:01:13,380 --> 00:01:18,960
This allows us to set a limit for the max file size we want someone to be able to upload.

20
00:01:19,260 --> 00:01:21,470
And this is a number in bytes.

21
00:01:21,540 --> 00:01:27,150
So if I want to think in something like megabytes I would think in millions if I wanted to restrict

22
00:01:27,150 --> 00:01:32,850
the upload here to 1 megabyte I would provide 1 million bytes as the value.

23
00:01:32,850 --> 00:01:37,170
So right here that is a one with six zeros afterwards.

24
00:01:37,200 --> 00:01:39,630
Now depending on the end point I could change this.

25
00:01:39,660 --> 00:01:46,380
It could be five megabytes 10 megabytes or any other number but it's generally a good idea to set some

26
00:01:46,380 --> 00:01:53,760
sort of max limit so users can't spam your server with huge files which are going to cost you to store.

27
00:01:53,760 --> 00:01:56,370
So right here we have our restriction in place.

28
00:01:56,370 --> 00:01:59,800
Now we're going to go ahead and make sure it works as expected.

29
00:01:59,850 --> 00:02:04,770
I'm gonna save index dot J S and we're gonna head over to postman.

30
00:02:04,920 --> 00:02:11,040
Now here we have two requests we have the one for uploading an avatar and then we have the other our

31
00:02:11,040 --> 00:02:13,610
little dummy request to the sample end point.

32
00:02:13,620 --> 00:02:17,310
We're working on this is the one that we're trying to mess around with.

33
00:02:17,370 --> 00:02:22,950
Now here let's go ahead and click a choose file button to pick a new file.

34
00:02:23,010 --> 00:02:27,640
And here we're gonna work with two files we have Philly JP G.

35
00:02:27,810 --> 00:02:33,080
This is under a megabyte in size and should be accepted and we have fall down.

36
00:02:33,090 --> 00:02:34,100
JP G.

37
00:02:34,230 --> 00:02:37,390
This is over a megabyte and should be rejected.

38
00:02:37,410 --> 00:02:41,570
Let's go ahead and start with Philly once again to make sure that's still working.

39
00:02:41,580 --> 00:02:46,560
I select it i click send and I get a two hundred back which is great.

40
00:02:46,560 --> 00:02:50,480
Next up I'm going to click choose files and I'll pick fall now.

41
00:02:50,500 --> 00:02:55,340
Fall is too large and it should get rejected by the server and down below.

42
00:02:55,350 --> 00:02:57,040
That's exactly what's happening.

43
00:02:57,060 --> 00:03:02,060
I have a five hundred status code and down below that I have my response body.

44
00:03:02,190 --> 00:03:08,250
Now in this case we can see it's HDL but we'll learn how to customize the melter errors and we'll send

45
00:03:08,250 --> 00:03:11,070
back Jason a little bit later in the section.

46
00:03:11,100 --> 00:03:14,160
For now though it is the error message itself that's important.

47
00:03:14,160 --> 00:03:17,940
And right here file too large is indeed correct.

48
00:03:18,450 --> 00:03:24,660
So by adding the limits property and setting file size we're able to restrict the size of the files

49
00:03:24,750 --> 00:03:25,820
we're accepting.

50
00:03:25,980 --> 00:03:29,570
Now let's go ahead and focus on restricting the file type.

51
00:03:29,610 --> 00:03:35,250
So in this case we're going to say that this specific end point it's expecting a Word document to be

52
00:03:35,250 --> 00:03:41,670
uploaded now over inside of the finder I provided you with two word documents in that node course images

53
00:03:41,670 --> 00:03:42,750
directory.

54
00:03:42,870 --> 00:03:47,640
We have the sample doc file and the sample Doc exe file.

55
00:03:47,670 --> 00:03:52,680
Both of these are Word documents and we're gonna work on it accepting both since they have different

56
00:03:52,680 --> 00:03:54,090
file extensions.

57
00:03:54,150 --> 00:03:57,870
We have Doc x for this one and Doc for this one.

58
00:03:57,870 --> 00:04:05,280
Now to actually limit by the file extension we're going to set up what's called a file filter file filter

59
00:04:05,340 --> 00:04:10,710
is another property we're going to configure and this is going to allow us to filter out the files that

60
00:04:10,710 --> 00:04:12,750
we don't want to actually have uploaded.

61
00:04:12,750 --> 00:04:19,360
So right here we'll set that up and the value for this is a function that's a function that's going

62
00:04:19,360 --> 00:04:22,720
to run when a new file is attempted to be uploaded.

63
00:04:22,720 --> 00:04:27,250
And right here I'll set that up using the Yes 6 method definition.

64
00:04:27,280 --> 00:04:32,980
Now this is going to get called internally by motor and it's going to provide us with three arguments

65
00:04:33,010 --> 00:04:34,750
we're gonna have request.

66
00:04:34,750 --> 00:04:40,460
We're going to have a file and we're going to have callback typically called CB.

67
00:04:40,540 --> 00:04:46,750
So this contains the request being made this contains information about the file being uploaded and

68
00:04:46,750 --> 00:04:50,950
we use this to tell Mulder when we're done filtering the file.

69
00:04:51,010 --> 00:04:56,740
Now we can go ahead and actually start the process of filling this function out before we worry about

70
00:04:56,740 --> 00:04:59,410
figuring out what type of file is being uploaded.

71
00:04:59,440 --> 00:05:02,620
Let's go ahead and talk about how we want to call callback.

72
00:05:02,770 --> 00:05:09,070
So if something goes wrong and we want to throw an error we simply pass that error to the callback function.

73
00:05:09,100 --> 00:05:12,790
So right here we call callback with a new error.

74
00:05:13,000 --> 00:05:15,390
And we provide a message that makes sense.

75
00:05:15,460 --> 00:05:19,950
We can say something like file must be a PDA.

76
00:05:19,990 --> 00:05:22,350
If that's exactly what we were looking for.

77
00:05:22,420 --> 00:05:26,150
Otherwise we can say something else like please upload an image.

78
00:05:26,170 --> 00:05:31,050
This is how we can send back an error to the person who uploaded the file.

79
00:05:31,060 --> 00:05:36,460
Now if things go well we're not going to provide the first argument to callback that we're still going

80
00:05:36,460 --> 00:05:37,350
to call it.

81
00:05:37,390 --> 00:05:42,830
We actually provide undefined as the first argument saying that nothing went wrong.

82
00:05:42,880 --> 00:05:49,120
Then we provide a boolean as the second argument we provide the value of true if the upload should be

83
00:05:49,120 --> 00:05:50,330
expected.

84
00:05:50,330 --> 00:05:56,620
The final way we can call callback is a way we're not going to use we provide no error and false.

85
00:05:56,620 --> 00:05:59,860
This is going to silently reject the upload.

86
00:05:59,860 --> 00:06:03,610
We want to either accept it or actually send an error back.

87
00:06:03,610 --> 00:06:06,550
So those are the two approaches that we'll be taking.

88
00:06:06,550 --> 00:06:11,530
Now we can go ahead and comment on this code out for the moment leaving it in place and we'll focus

89
00:06:11,530 --> 00:06:17,470
on actually filling out the function what we need to do is figure out how to get the name of the file

90
00:06:17,470 --> 00:06:23,200
that was uploaded because we want to look at the file extension and see if it matches up with what we're

91
00:06:23,200 --> 00:06:24,450
looking for.

92
00:06:24,550 --> 00:06:31,120
Now all of that information the information about the file name it's contained on the file object right

93
00:06:31,120 --> 00:06:31,870
here.

94
00:06:31,870 --> 00:06:37,060
And at this point I want to take a quick moment to head over to the documentation and show you where

95
00:06:37,060 --> 00:06:39,470
you can learn more about all of this.

96
00:06:39,520 --> 00:06:46,000
So I'll head over to the browser once again and right here we are at the Malta page on NPM and J.S.

97
00:06:46,030 --> 00:06:47,200
dot com.

98
00:06:47,200 --> 00:06:53,530
If we scroll down the first major section in the documentation is usage and this is sort of generic

99
00:06:53,530 --> 00:06:56,590
examples that cover things we've already looked at.

100
00:06:56,590 --> 00:07:02,290
What we're going to do is scroll past that to the API section which defines everything that multiple

101
00:07:02,290 --> 00:07:03,510
supports.

102
00:07:03,520 --> 00:07:09,850
Now the first section is called file information and this shows us all of the properties available on

103
00:07:09,850 --> 00:07:11,320
that file object.

104
00:07:11,320 --> 00:07:13,630
We have access to right here.

105
00:07:13,630 --> 00:07:16,710
Now the one we're interested in is original name.

106
00:07:16,930 --> 00:07:24,460
Original name is going to allow us to get the name of that file whether it's Philly dot JP G fall JP

107
00:07:24,540 --> 00:07:30,490
G or something else and we'll be able to use it with a little conditional logic to figure out if it's

108
00:07:30,490 --> 00:07:31,050
a file.

109
00:07:31,060 --> 00:07:33,390
We want to accept or reject.

110
00:07:33,400 --> 00:07:41,320
So over here inside of our function let's start by just accepting PD f files if the extension is not

111
00:07:41,320 --> 00:07:45,220
a PDA if that's a problem we're going to send back an error.

112
00:07:45,280 --> 00:07:47,620
Otherwise we'll accept the upload.

113
00:07:47,620 --> 00:07:51,540
Let's get started with an if statement that looks at that file extension.

114
00:07:51,550 --> 00:07:52,300
So if.

115
00:07:52,300 --> 00:07:56,760
Right here we are looking at file dot original name.

116
00:07:56,770 --> 00:08:03,040
Notice that name is not capital and we are not using Campbell case here for whatever reason it is all

117
00:08:03,040 --> 00:08:05,590
in lower case any property.

118
00:08:05,620 --> 00:08:13,420
Here we're looking for is going to be on these string ends which ends with is going to return true if

119
00:08:13,420 --> 00:08:20,260
the original name ends with the string we provide and false otherwise in this case let's see if it ends

120
00:08:20,260 --> 00:08:22,350
with DOT PD f.

121
00:08:22,360 --> 00:08:26,950
Next up we'll set up the code block to run when the condition is true.

122
00:08:26,950 --> 00:08:31,360
Now in this case this code runs when it is a PD f we want the opposite effect.

123
00:08:31,360 --> 00:08:34,600
So I will use the illogical not operator.

124
00:08:34,600 --> 00:08:38,820
Now this code is only going to run when it's not a PD F.

125
00:08:38,860 --> 00:08:44,020
And in that case we are going to use a return to stop the function execution.

126
00:08:44,140 --> 00:08:50,320
I'm going to call callback and I will provide an error as that first argument a new error with the following

127
00:08:50,320 --> 00:08:54,960
message right here please upload a PD f.

128
00:08:55,030 --> 00:08:56,260
Perfect.

129
00:08:56,290 --> 00:09:03,910
Next up if things are going well and it was a PD f file we will accept it by using CB with undefined

130
00:09:04,240 --> 00:09:04,930
right here.

131
00:09:04,930 --> 00:09:06,710
Providing true.

132
00:09:06,730 --> 00:09:12,060
Now let's go ahead and test our work making sure this restriction is working as expected.

133
00:09:12,100 --> 00:09:17,220
What I'm going to do is head over to postmen and upload a couple of different files now.

134
00:09:17,250 --> 00:09:21,100
I tried to upload the image which is currently set up right there.

135
00:09:21,120 --> 00:09:24,930
It's going to fail but it might fail because the file is too large.

136
00:09:24,950 --> 00:09:26,630
So let's switch that out.

137
00:09:26,730 --> 00:09:30,090
I'll start by trying to upload one of the word documents.

138
00:09:30,090 --> 00:09:31,660
Either one will work.

139
00:09:31,860 --> 00:09:34,750
I'll send that off to the server and what do I get.

140
00:09:34,770 --> 00:09:35,990
I can see my message.

141
00:09:36,000 --> 00:09:39,630
Please upload a PDA which is fantastic.

142
00:09:39,630 --> 00:09:45,180
Next up let's use choose files again and this time we're going to upload APD.

143
00:09:45,270 --> 00:09:46,860
This one should work.

144
00:09:46,860 --> 00:09:53,100
And if I send that off we get a two hundred and the file was accepted and it's now stored inside of

145
00:09:53,100 --> 00:09:55,110
the images directory.

146
00:09:55,110 --> 00:10:00,780
So using file filter is going to allow us to filter the files by their file type.

147
00:10:00,780 --> 00:10:08,460
In this case we have an end point which is only accepting PD apps that are under one megabyte insides.

148
00:10:08,460 --> 00:10:15,170
Now what if we wanted to try to find a file with multiple extensions if I want to support Word documents.

149
00:10:15,180 --> 00:10:24,090
It might end in a dot DRC or dot D O C X or we have to do for that is switch up our if statement checking

150
00:10:24,090 --> 00:10:26,210
for one or the other.

151
00:10:26,220 --> 00:10:32,700
Now you could use the or operator and add another ends with call or you could use a regular expression

152
00:10:32,700 --> 00:10:33,870
to get that done.

153
00:10:33,960 --> 00:10:35,280
And that's what we'll do.

154
00:10:35,400 --> 00:10:40,170
If you've never worked with regular expressions before they can be really hard to get started with.

155
00:10:40,500 --> 00:10:46,700
I always recommend starting with regular expressions by using the following site in the browser.

156
00:10:46,710 --> 00:10:51,750
We're gonna go over to Reg x 1 0 1 dot com.

157
00:10:51,750 --> 00:10:57,450
This is one of many different sites that allow you to create regular expressions using their gooey interface

158
00:10:57,720 --> 00:11:02,250
that you can then take into your javascript code and it's a great way to get started.

159
00:11:02,250 --> 00:11:08,250
If you haven't used regular expressions before right here we're gonna start with our test string.

160
00:11:08,640 --> 00:11:15,350
Now in this case that would be the file name so I can use something like my Doc Dot D O C.

161
00:11:15,420 --> 00:11:17,470
Now this is something I do want to support.

162
00:11:17,490 --> 00:11:22,120
I want to support dot d o c or d o c x.

163
00:11:22,410 --> 00:11:28,530
Now we provide the regular expression up above and see if this would be considered a match or not.

164
00:11:28,530 --> 00:11:34,950
And to start we're going to look for the dot I want to make sure that I have the DOT for the file extension

165
00:11:35,250 --> 00:11:43,410
and to do that we use a backslash with the DOT following it and he backslash escapes the dot the dot

166
00:11:43,410 --> 00:11:48,300
usually has a special meaning in regular expressions when we use the backslash.

167
00:11:48,300 --> 00:11:54,190
That means we're looking for this character literally in the string we're trying to find that match.

168
00:11:54,300 --> 00:11:59,370
From there we can list out the file extension and we're gonna go ahead and list out.

169
00:11:59,380 --> 00:12:06,960
D o c we can see that's considered a match as well and we'll wrap things up with the dollar sign the

170
00:12:06,960 --> 00:12:09,970
dollar sign means that this comes at the end.

171
00:12:10,080 --> 00:12:14,760
So I don't want this somewhere else in the file I want the string to end with it.

172
00:12:14,760 --> 00:12:20,490
So right here if I add other characters we'll see it's no longer considered a match.

173
00:12:20,520 --> 00:12:22,730
Well dot DLC does exist.

174
00:12:22,740 --> 00:12:24,010
It's not at the end.

175
00:12:24,030 --> 00:12:29,580
So right here we're just enforcing that it does indeed come at the end which is what we want now in

176
00:12:29,580 --> 00:12:30,080
our case.

177
00:12:30,090 --> 00:12:37,650
As I mentioned we want D O C or D O C X we can alter our regular expression a little bit to get that

178
00:12:37,650 --> 00:12:38,220
done.

179
00:12:38,400 --> 00:12:44,670
Right here we are going to remove DRC and open and close a set of parentheses.

180
00:12:44,730 --> 00:12:50,910
Then we're going to list out our regular expressions DRC separated by the vertical bar.

181
00:12:50,970 --> 00:12:53,260
So DRC vertical bar.

182
00:12:53,280 --> 00:12:55,330
D o c x.

183
00:12:55,560 --> 00:13:01,130
This tells the regular expression to match d o c or d o c x.

184
00:13:01,200 --> 00:13:05,010
So down below we can see what we have is considered a match.

185
00:13:05,010 --> 00:13:08,880
And so it is when DRC X is the extension.

186
00:13:08,880 --> 00:13:15,060
Now if I were to switch that up and add more characters once again we do not have a match in place.

187
00:13:15,060 --> 00:13:18,450
Now I'm not going to take a deep dive into regular expressions.

188
00:13:18,450 --> 00:13:22,420
There are entire courses books and sites that are dedicated to them.

189
00:13:22,530 --> 00:13:28,080
But I did want to give you a small introduction if you've never used them before so you can understand

190
00:13:28,080 --> 00:13:29,650
what's actually happening.

191
00:13:29,670 --> 00:13:34,920
We're gonna go ahead and use this inside of our program to check the file extension.

192
00:13:34,920 --> 00:13:39,990
So right here let's go ahead and swap out the if condition with something brand new.

193
00:13:39,990 --> 00:13:46,470
In this case we still want to look at the original file name so we'll start with file dot original name

194
00:13:46,470 --> 00:13:47,380
once again.

195
00:13:47,850 --> 00:13:55,620
And now we're going to use match match allows us to provide a regular expression inside of forward slashes

196
00:13:56,010 --> 00:14:02,370
and this is going to be the exact regular expression we just typed over in the browser that is backslash

197
00:14:02,460 --> 00:14:06,870
dot in parentheses followed by the dollar sign.

198
00:14:06,870 --> 00:14:10,110
We're gonna have D O C with the vertical bar.

199
00:14:10,110 --> 00:14:12,080
D o c x.

200
00:14:12,240 --> 00:14:18,420
Now we have a filter that's gonna throw errors when we see those will reverse that by using the logical

201
00:14:18,450 --> 00:14:20,130
not operator.

202
00:14:20,130 --> 00:14:25,960
Down below we can update our message to please upload a word document.

203
00:14:26,250 --> 00:14:27,370
Excellent.

204
00:14:27,390 --> 00:14:32,820
Now with this in place we can go ahead and test our work to make sure this is functioning as expected

205
00:14:33,300 --> 00:14:35,400
over inside of postmen.

206
00:14:35,430 --> 00:14:40,020
I'm going to try to send off the IDF which should now fail and it does.

207
00:14:40,020 --> 00:14:45,200
It says Please upload a word document and I will pick one of the two word documents.

208
00:14:45,210 --> 00:14:46,850
Either one will work.

209
00:14:46,950 --> 00:14:51,210
I'll pick the doc X one I upload it and it works as expected.

210
00:14:51,390 --> 00:14:59,020
If I switch over to the dark one the other word document and send that off that should upload as well.

211
00:14:59,040 --> 00:15:05,880
So now we have a way to restrict by file size and by the type of the file being uploaded in the next

212
00:15:05,880 --> 00:15:11,790
video it's going to be up to you to add similar validation for the route in the user router.

213
00:15:11,790 --> 00:15:13,770
So let's go ahead and jump into that one.