In this lesson you're going to learn how to add validation to the files that are being uploaded to your
server.
So there are two main things we want to validate.
One is the file size and the second is the file type.
So when it comes to the file size I want to restrict it to some capacity.
I don't want to allow for a two gigabyte file to be uploaded for something simple like a profile picture.
In that case a one or two megabyte limit would be plenty.
So we'll learn how to restrict that.
We'll also learn how to restrict the uploads by their file type.
So for this end point I might want to require that only PD Fs are uploaded and for the Avatar end point
I might want to require that an image is uploaded.
We'll learn how to configure that as well.
Now everything we set up is going to be configured right here on this options object that we pass to
Mulder.
Let's start by restricting the file size on the multiple object.
We have a another property we can set up alongside of dest called limits now limits itself is an object
because there are multiple different limits.
We can set but the most popular and the only one we're actually going to use in the course is file size.
This allows us to set a limit for the max file size we want someone to be able to upload.
And this is a number in bytes.
So if I want to think in something like megabytes I would think in millions if I wanted to restrict
the upload here to 1 megabyte I would provide 1 million bytes as the value.
So right here that is a one with six zeros afterwards.
Now depending on the end point I could change this.
It could be five megabytes 10 megabytes or any other number but it's generally a good idea to set some
sort of max limit so users can't spam your server with huge files which are going to cost you to store.
So right here we have our restriction in place.
Now we're going to go ahead and make sure it works as expected.
I'm gonna save index dot J S and we're gonna head over to postman.
Now here we have two requests we have the one for uploading an avatar and then we have the other our
little dummy request to the sample end point.
We're working on this is the one that we're trying to mess around with.
Now here let's go ahead and click a choose file button to pick a new file.
And here we're gonna work with two files we have Philly JP G.
This is under a megabyte in size and should be accepted and we have fall down.
JP G.
This is over a megabyte and should be rejected.
Let's go ahead and start with Philly once again to make sure that's still working.
I select it i click send and I get a two hundred back which is great.
Next up I'm going to click choose files and I'll pick fall now.
Fall is too large and it should get rejected by the server and down below.
That's exactly what's happening.
I have a five hundred status code and down below that I have my response body.
Now in this case we can see it's HDL but we'll learn how to customize the melter errors and we'll send
back Jason a little bit later in the section.
For now though it is the error message itself that's important.
And right here file too large is indeed correct.
So by adding the limits property and setting file size we're able to restrict the size of the files
we're accepting.
Now let's go ahead and focus on restricting the file type.
So in this case we're going to say that this specific end point it's expecting a Word document to be
uploaded now over inside of the finder I provided you with two word documents in that node course images
directory.
We have the sample doc file and the sample Doc exe file.
Both of these are Word documents and we're gonna work on it accepting both since they have different
file extensions.
We have Doc x for this one and Doc for this one.
Now to actually limit by the file extension we're going to set up what's called a file filter file filter
is another property we're going to configure and this is going to allow us to filter out the files that
we don't want to actually have uploaded.
So right here we'll set that up and the value for this is a function that's a function that's going
to run when a new file is attempted to be uploaded.
And right here I'll set that up using the Yes 6 method definition.
Now this is going to get called internally by motor and it's going to provide us with three arguments
we're gonna have request.
We're going to have a file and we're going to have callback typically called CB.
So this contains the request being made this contains information about the file being uploaded and
we use this to tell Mulder when we're done filtering the file.
Now we can go ahead and actually start the process of filling this function out before we worry about
figuring out what type of file is being uploaded.
Let's go ahead and talk about how we want to call callback.
So if something goes wrong and we want to throw an error we simply pass that error to the callback function.
So right here we call callback with a new error.
And we provide a message that makes sense.
We can say something like file must be a PDA.
If that's exactly what we were looking for.
Otherwise we can say something else like please upload an image.
This is how we can send back an error to the person who uploaded the file.
Now if things go well we're not going to provide the first argument to callback that we're still going
to call it.
We actually provide undefined as the first argument saying that nothing went wrong.
Then we provide a boolean as the second argument we provide the value of true if the upload should be
expected.
The final way we can call callback is a way we're not going to use we provide no error and false.
This is going to silently reject the upload.
We want to either accept it or actually send an error back.
So those are the two approaches that we'll be taking.
Now we can go ahead and comment on this code out for the moment leaving it in place and we'll focus
on actually filling out the function what we need to do is figure out how to get the name of the file
that was uploaded because we want to look at the file extension and see if it matches up with what we're
looking for.
Now all of that information the information about the file name it's contained on the file object right
here.
And at this point I want to take a quick moment to head over to the documentation and show you where
you can learn more about all of this.
So I'll head over to the browser once again and right here we are at the Malta page on NPM and J.S.
dot com.
If we scroll down the first major section in the documentation is usage and this is sort of generic
examples that cover things we've already looked at.
What we're going to do is scroll past that to the API section which defines everything that multiple
supports.
Now the first section is called file information and this shows us all of the properties available on
that file object.
We have access to right here.
Now the one we're interested in is original name.
Original name is going to allow us to get the name of that file whether it's Philly dot JP G fall JP
G or something else and we'll be able to use it with a little conditional logic to figure out if it's
a file.
We want to accept or reject.
So over here inside of our function let's start by just accepting PD f files if the extension is not
a PDA if that's a problem we're going to send back an error.
Otherwise we'll accept the upload.
Let's get started with an if statement that looks at that file extension.
So if.
Right here we are looking at file dot original name.
Notice that name is not capital and we are not using Campbell case here for whatever reason it is all
in lower case any property.
Here we're looking for is going to be on these string ends which ends with is going to return true if
the original name ends with the string we provide and false otherwise in this case let's see if it ends
with DOT PD f.
Next up we'll set up the code block to run when the condition is true.
Now in this case this code runs when it is a PD f we want the opposite effect.
So I will use the illogical not operator.
Now this code is only going to run when it's not a PD F.
And in that case we are going to use a return to stop the function execution.
I'm going to call callback and I will provide an error as that first argument a new error with the following
message right here please upload a PD f.
Perfect.
Next up if things are going well and it was a PD f file we will accept it by using CB with undefined
right here.
Providing true.
Now let's go ahead and test our work making sure this restriction is working as expected.
What I'm going to do is head over to postmen and upload a couple of different files now.
I tried to upload the image which is currently set up right there.
It's going to fail but it might fail because the file is too large.
So let's switch that out.
I'll start by trying to upload one of the word documents.
Either one will work.
I'll send that off to the server and what do I get.
I can see my message.
Please upload a PDA which is fantastic.
Next up let's use choose files again and this time we're going to upload APD.
This one should work.
And if I send that off we get a two hundred and the file was accepted and it's now stored inside of
the images directory.
So using file filter is going to allow us to filter the files by their file type.
In this case we have an end point which is only accepting PD apps that are under one megabyte insides.
Now what if we wanted to try to find a file with multiple extensions if I want to support Word documents.
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
for one or the other.
Now you could use the or operator and add another ends with call or you could use a regular expression
to get that done.
And that's what we'll do.
If you've never worked with regular expressions before they can be really hard to get started with.
I always recommend starting with regular expressions by using the following site in the browser.
We're gonna go over to Reg x 1 0 1 dot com.
This is one of many different sites that allow you to create regular expressions using their gooey interface
that you can then take into your javascript code and it's a great way to get started.
If you haven't used regular expressions before right here we're gonna start with our test string.
Now in this case that would be the file name so I can use something like my Doc Dot D O C.
Now this is something I do want to support.
I want to support dot d o c or d o c x.
Now we provide the regular expression up above and see if this would be considered a match or not.
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
and to do that we use a backslash with the DOT following it and he backslash escapes the dot the dot
usually has a special meaning in regular expressions when we use the backslash.
That means we're looking for this character literally in the string we're trying to find that match.
From there we can list out the file extension and we're gonna go ahead and list out.
D o c we can see that's considered a match as well and we'll wrap things up with the dollar sign the
dollar sign means that this comes at the end.
So I don't want this somewhere else in the file I want the string to end with it.
So right here if I add other characters we'll see it's no longer considered a match.
Well dot DLC does exist.
It's not at the end.
So right here we're just enforcing that it does indeed come at the end which is what we want now in
our case.
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
done.
Right here we are going to remove DRC and open and close a set of parentheses.
Then we're going to list out our regular expressions DRC separated by the vertical bar.
So DRC vertical bar.
D o c x.
This tells the regular expression to match d o c or d o c x.
So down below we can see what we have is considered a match.
And so it is when DRC X is the extension.
Now if I were to switch that up and add more characters once again we do not have a match in place.
Now I'm not going to take a deep dive into regular expressions.
There are entire courses books and sites that are dedicated to them.
But I did want to give you a small introduction if you've never used them before so you can understand
what's actually happening.
We're gonna go ahead and use this inside of our program to check the file extension.
So right here let's go ahead and swap out the if condition with something brand new.
In this case we still want to look at the original file name so we'll start with file dot original name
once again.
And now we're going to use match match allows us to provide a regular expression inside of forward slashes
and this is going to be the exact regular expression we just typed over in the browser that is backslash
dot in parentheses followed by the dollar sign.
We're gonna have D O C with the vertical bar.
D o c x.
Now we have a filter that's gonna throw errors when we see those will reverse that by using the logical
not operator.
Down below we can update our message to please upload a word document.
Excellent.
Now with this in place we can go ahead and test our work to make sure this is functioning as expected
over inside of postmen.
I'm going to try to send off the IDF which should now fail and it does.
It says Please upload a word document and I will pick one of the two word documents.
Either one will work.
I'll pick the doc X one I upload it and it works as expected.
If I switch over to the dark one the other word document and send that off that should upload as well.
So now we have a way to restrict by file size and by the type of the file being uploaded in the next
video it's going to be up to you to add similar validation for the route in the user router.
So let's go ahead and jump into that one.