So let's move to the server side now,
for this file upload.
And for this, of course,
we got the app.js file in our routes.
Now, before we dig into the file upload part,
let's think about how we parsed and handled incoming data
as long as we didn't deal with files.
And there, this middleware played an important role.
This urlencoded middleware that's built into express,
actually parses incoming requests and extracts request data
that might be attached to those requests.
And this name URL encoded always was a bit strange,
it might make more sense now that you know
that the default mode for encoding forum data
is this X www urlencoded value.
So that's why this middleware was called like this,
because this was dealing with data
that was encoded in that mode.
So with that urlencoded data.
Now that also, however,
tells us that it's probably not able
to deal with multi-part form data, which does include files.
We had to switch to encoding mode after all.
And this middleware
is now not able to deal with data anymore.
So no problem, we just had a different middleware.
In the end it's that simple.
However, now there isn't a built in one in express,
but we'll have to use a third party package.
Now there is a wide variety of packages you can use
for dealing with file uploads in node express applications,
but one of the most popular ones
and a package that's very easy to use is milter.
You can search for milter to find it's NPM
or it's GitHub page.
GitHub is basically where its code is stored
since it's a open source project,
which means everyone can view the source code.
Most third-party packages are open source by the way.
And this is a package, a middleware for express.js,
which we can use for handling multipart/form.data
as they tell us here in the description of the package.
And that's great because that's exactly what we need.
So we can install this package
with this command here in the end,
and then we can configure and use it as described here
in their own description.
Now, feel free to go through that.
If you wanna dive into all the details,
but I'll show you some key aspects for all this section
and in this course in general.
So, first of all, let's go back
and stop this running server here,
to run this npm install --save milter command here
to install this milter package into our project here,
because that's step number one.
Thereafter, we can restart this server with npm start.
Now we just use this middleware a little bit differently,
then we use the urlencoded middleware.
We're not going to apply it to all the incoming requests,
instead, we're only going to apply it to the requests.
So on the routes where we do expect files to be uploaded.
And that means that first of all,
in the users.js routes file here,
we have to register a new route,
which handles the form submission.
Keep in mind that in that form,
we are sending a POST request to /profiles.
So we should register as such a route here,
a post request to /profiles.
And then here, we got our function
that should handle incoming requests to that route.
Now, this is a route where we expect a file to be attached
and therefore that's a route
where we wanna apply this milter middleware to.
And for this,
I'm going to show you a new way of adding middlewares
that you haven't seen before, but that's also quite common,
especially for cases like this.
So that's quite helpful for scenarios
where a middleware should not be applied to all requests,
but just some requests.
First of all, here in users.js,
we start by simply importing milter by requiring milter
just as we required other packages before,
as well in this course like this.
Then once we did this,
we can execute milter as a function actually,
just as we executed express as a function in the app.js file
here, we execute milter as a function now
and queue this function we pass a configuration object
where we can configure that behavior of milter.
For example, where it should store the files.
We'll do this in a second.
This will give us a upload middleware.
And if we now wanna apply that to only one specific route,
we can a the express.js feature
that allows us to do just that.
We can go to the route where we wanna apply our middleware,
and after the path,
before we have our route handling function here,
we can now simply add an extra parameter value.
It turns out that for all these express routes,
you can add an unlimited list of middleware functions.
Thus far, we always only added one,
our final route handling function,
which turns out to all be a middleware function technically.
Now, we don't just wanna have that,
but an additional middle-ware function here,
which we simply add as an extra parameter value.
And the order of values matters here
because they are executed from left to right.
And I want my own route handling function
to be executed last,
so I'll put it as a last parameter value.
And before debt, after the path here,
I'll add this milter middleware function.
However, actually we don't use upload like this.
It technically isn't the function itself, it's an object
that contains a bunch of middleware functions.
And to be precise, it contains functions
for accepting an array of files or a single file.
And here I'm expecting a single file to be uploaded.
So we call upload single and to upload single,
we pass the name of the input field that will hold the file.
So in my case here,
that's the name assigned to this input of type file
image in this case.
So this name, the value of this name
is what we now pass here to this single function,
to this single method.
And this will then return a middleware function
that will be executed on all incoming requests
that are received by this route.
So this year we'll ensure that for requests
that are received by this route,
milter will look into that request.
And if there is such an image file attached to that request,
it will give us access to that file.
It will also give us access to all the other forum fields
like in this case, the username.
So milter --2,
but in addition, it gives us access to the file.
And therefore we only wanna use it on the route
where the file is expected
instead of handling all routes with it,
because we need to tell milter
what the name of that file field will be.
And with that, we now will get access to that file
through this request object.
There, we already learned that request body
could be used to get access to the overall data
that's attached to the request.
And that will still be true
for all the non file data for the file.
There will be a req.file
and that will then be the file
that was parsed from that request.
So here we got the uploadedImageFile,
and then we got the userData,
which is the other data stored in the body.
In this case that will, of course only be one property,
the username property,
because that's the only other input field
I have in this form.
That's now how we get access to that uploaded file.
However, we're not entirely there yet,
because what Multer will do for us conveniently is,
it will not just give us access to that file,
it will also automatically store it
somewhere on our hard drive on our server side here.
So in this server side project,
so that we don't have to move that file
or store that file somewhere manually
because that's the other important part, the file storage.