In this lesson we're gonna kick off the section by figuring out how we can add support for file uploads
to The Express application.
Now for the moment we're not going to worry about users being authenticated or the file being of the
correct type such as an image.
We're going to start by just getting the basics in place then throughout the section we'll refine the
code to fit our specific needs which is to allow a user to upload a profile picture for their account.
So to kick things off let's talk about how we add support for file uploads to Express Express by default.
Actually doesn't support file uploads but there is an NPM library also released and maintained by the
same team that releases and maintains Express.
And this allows you to add file uploads to express with just a couple of lines of code and that's where
we're going to start.
So let's head over to the browser and check out the NPM library.
We'll be using from the browser we can google NPM Malta.
That is the name of the library we'll be integrating and we can check out the NPM package page to learn
more.
This is by far the most popular solution for file uploads.
When working with note if the name of the library motor is short for multi part and this comes from
the type of data that motor allows your application to accept.
So so far the only data we've sent from the client to the server has been Jason data.
We've provided that Jason as the request body and the server has passed that Jason into a javascript
object and we've used it.
We've done this for dozens of end points like the end point for signing up where the email password
and other information is provided to the server.
When it comes to file uploads we're no longer going to send a Jason body.
Instead we'll be using form data.
So right here this is what's going to allow us to upload files.
So we're gonna take the file grab it's binary data and send that off to the server.
So right here we can go ahead and kick things off with a basic example to see how all of this is going
to fit into our existing application to get started.
Let's go ahead and install this library over in Visual Studio code.
We can go ahead and run a following command from the terminal that is going to be NPM AI for install.
The library is melter at the latest version one point four point one.
Now once we have this library in place we're going to explore a basic example right here in index dot
J s a nice bare bones version to get started.
I will run NPM dev to start up that dev server excuse me that is NPM run Dev.
And once the dev server is up and running we'll actually write the correct code.
Now none below in index dot J S we have an example we had worked with before to explore how populate
worked.
We can go ahead and clean that up.
Removing it end up above.
We had a commented out example of how to use middleware which we wrote when we were exploring how we
could set up our own authentication middleware.
We're going to go ahead and remove that as well.
I'm going to add a few empty lines and right here we're going to write a little example in isolation
of how we could add file upload to express.
Now the first thing we have to do is a load in Malta.
So const Malta is going to come from a call to require where we require the Malta library.
Now typically we would put this line at the top of the file with our other require calls.
The reason I'm placing it right here for this example is so we can see all of the code necessary to
get this done.
Now the next thing we have to do is configure Malta and we might configure it multiple times for a single
application.
Sometimes we might want to accept just PDUFA file uploads.
Other times we just might want to accept images so we'll end up creating new instances of Malta depending
on the needs of our application.
Now in this case we're not going to worry about performing any validation will allow any file to be
uploaded to the server.
So down below what are we going to do.
We are going to create a new variable typically called upload and we are going to call Malta to get
a new instance of it right here.
We passed to it an options object and this is where we're going to provide all of the configuration
for the tool for the moment.
We're going to provide just one property that is dest which is short for a destination.
And this is the only one we need to get started right here.
We can pick a name for the folder where all of the uploads should be stored.
I'll go ahead and pick something like images now with this in place.
We can focus on actually creating a new end point where the client will be able to upload these files
to set up the end point.
We're gonna use a post HDTV method which is required for uploading images right here and that would
be app dot post and we'll set up an end point for this one.
Let's just use something generic for this example.
This isn't going to be the actual route that makes it into the final version of the task manager.
So I'll use something like forward slash upload.
From here we can go ahead and set up our request and response arguments in our little root handler and
all we're going to do is use a response dot send to send back a two hundred with no response body.
Now when it comes to actually adding support for upload what we get access to is middleware from the
multi-year library.
So right here in between the path and the function we're going to register the multi-year middleware
similar to how we would do this with our authentication middleware.
What are we going to do.
We're gonna use upload and we are going to call a function on it.
That's going to return the middleware we need to use.
And this is single.
So right here what are we doing.
We first provide our string argument then we provide whatever comes back from the call to single as
the second argument.
And finally we provide our root handler as that third and final argument.
Now single requires a single argument it is a string.
And here we just pick a name for the upload.
So I'm going to use something like upload perfect now that we have this in place our server is actually
configured to accept and save files that are uploaded to it.
Let's go ahead and figure out how we can actually get this done for the moment we'll stick to file uploads
from postmen but I am going to include a bonus section with a course that'll show you how to get this
done from the browser as well.
Now throughout this section we'll be uploading a lot of different files of different to file types to
the server and to make it a lot easier for you to work with the videos I've included all of the files
that I'll be using you can download them by heading over to the following U.R.L. links.
Dot Mead dot I O forward slash files here you're going to be greeted with a download button where you
can download a directory called Node course images we're gonna take a quick moment to download that
then I'm gonna go ahead and click it to expand that directory and view it in the downloads folder and
right here I have the contents of the directory I have three images fall I have Philly and I have a
profile pic and I have a couple of other files of different types I have an old word doc using the DOT
Doc extension I have a new word doc using the DOT Doc X extension and I have a sample PD f all of which
we'll be using throughout this section as we explore file uploads I recommend using these same files
and images I have here as it will be a little easier to follow along.
Now for the moment it doesn't matter what we upload so let's go ahead and move into postmen and figure
out how to get this done.
The first thing I'm going to do is close all open tabs I have a whole bunch open and I don't want that.
So I can right click any of the tabs and click close all tabs.
Now if I've made changes to any of the requests it's going to ask me if I want to save those changes
I'll go ahead and save changes for everything.
And now we're back to a nice empty request.
And this is exactly what we're going to start with.
We're not going to worry about adding this request to the task app collection as once again and this
is just an example end point to see how all of this works right here.
Let's start with the basics.
We have to use the post HDTV method and we're going to set up r You are our local host on port three
thousand forward slash upload was the U.R.L. we decided to work with.
Now it comes to specifying the data we want to send across the wire.
Now if I was sending a Jason and request body I know how I would get that done I would go over to body.
I'd go to raw switch that to Jason and provide my data down below.
Now in this case as mentioned earlier we need to use what's known as form and data.
This is where we can specify the binary data for a file whether it's an image or something else that
we want to upload to the server.
Now right here we are greeted with a series of key value pairs.
We could have one or we could have multiple and this is where we provide the content we want to upload.
Now the key you type in needs to match up exactly with the value you provided to single over here.
So here we'll telling melter to look for a file called upload when the request comes in.
If I use something different.
Is not going to find it.
That means over here in post man I want to type in upload.
Next up the value.
This is where we provide the file itself.
Now it's asking us to type some value in.
This is not going to work for us since I want to upload an entire file so all I'm going to do is switch
this from being text over to file using the dropdown then postman is going to allow me to select the
file from the file system.
Right here we can go ahead and pick any of the images we'd like.
Let's go ahead and upload this one.
Billy dot JP.
Gee this is a picture of city hall in Center City Philadelphia.
I'm gonna go ahead and click open it to attach that to upload and all we need to do is send this off
when we send it off.
The following is gonna happen.
First stop it's going to match with the route we've created.
We're using post and upload then mult there is going to look for the file called upload in the request.
It's going to find it and it's gonna save it to the images directory which it's actually already created.
Now that folder is empty but it won't be in just a moment.
Now if the image gets uploaded correctly then it will continue on running our function and we'll get
our 200 response back over and post man.
I'm going to click send to work through that process I just described right here I get a two hundred
and if I head over to visual studio code in that image is directory I now have a file.
Now if we try to open this file in Visual Studio code we're gonna get the following error VRC is complaining
because it's binary data and it doesn't know how to render the file contents.
The only reason that's the case has to do with the file name so right here we have a file name which
is just a randomly generated series of characters.
We'll learn how to address this a bit later.
The problem is that there's no file extension.
We can preview the image to make sure it's the right one we uploaded by clicking.
Rename using the right arrow to go to the end and just adding the same file extension as the original
file we uploaded which was done.
JP G.
When we do this visual studio code we'll learn how to correctly pass the image.
And now we can open it up just to preview it so we won't need to manually change file extensions in
the future.
That's just a temporary work around until we learn more about how we can use motor to upload files.
Now it's challenge time.
It's going to be your job to use Mulder to create a new end point for uploading the user's profile picture
over in the user router.
Now once again we're just focused on the basics.
We're not going to worry about actually authenticating the user or associating the upload with their
user account.
We'll worry about all of that as we progress through the section.
For now we can head over to the user router we can scroll to the very bottom of the file and I'll paste
the challenge comments in so we can talk about what I'd like you to do.
So right here your goal is to add a new end point to this router you're gonna setup post forward slash
users forward slash me forward slash avatar.
This is the end point that users will eventually use to upload a new profile picture.
Now later on we will associate the upload with the user account and will require authentication.
But let's start with the basics first.
So you'll setup that end point and then you're going to set up melter so you'll have to require it in
and configure it.
Creating a destination directory and in this case I'd like you to save the uploads to a folder called
avatars.
Now once you have that in place you're going to use the middleware with the new request.
And when you provide the name to the single method.
Go ahead and use Avatar as well over an index dot in J S I had used upload.
You'll use avatar for the new route you're creating.
So back end users dot J s step four is to just send back that two hundred response from the root handler
at the end and finally you're going to test your work try to upload one of the other images from the
directory I've provided.
Then go ahead and change its extension and open it to make sure it's the correct image showing up so
take some time to knock that out test your work and when you're done come back and click play
how'd that go.
Let's go ahead and kick things off together by setting up the brand new route right here.
That would be router dot post to setup a post request.
Then the U.R.L. forward slash users forward slash me forward slash avatar.
Now remember the type of data we're sending along is not a Jason body.
It is the form data and that's why we have a completely separate request for uploading the avatar.
It wouldn't be possible to combine this with something like the other request for updating a user's
profile so right here we're gonna go ahead and continue on.
I'll actually skip to step number 4 to set up our root handler right here.
Request and response and we'll just use response dot send to send back a two hundred.
Now let's go ahead and actually load Mulder in and configure it to work as we want it to work up at
the very top of the file like we typically do.
I will load the library in const Mulder equals I'm gonna use require to load that library and once we
have that in place we'll head back down below and actually configure it specifying the only thing we
need to specify and the only thing we know about the destination directory.
So down here we can create our new upload we're going to call Mulder providing the options object and
I will set destination equal to avatars.
As I mentioned in the challenged comments for step two.
Next up step number three we actually want to register that middleware to be used with this request
so we'll add upload dot single right here between our path and our route handler and I will provide
as the key.
We're looking for Avatar mentioned down below in Step number three.
Now that we have this in place we're actually all done when it comes to the code part of the challenge.
We're going to move on to Step Number Five and test our work to make sure we can upload files to that
avatars directory right here.
I will remove the challenge comments I'm going to save user dot J S and we're going to test things out
from postmen.
Now for this one we can create a new request inside of the task app collection as the end point you
just made will actually be part of the task manager app.
So right here I'm going to add a new request we can call this anything we'd like.
Let's use something like upload Avatar I'll create the request then I will click it to expand it and
we can start to fill things out now.
Authorization is already set up but it's not required.
We can leave it on though there's no need to disable it.
Right here we will switch from get to post I'll use the environment variable for our real requests to
set up the U.R.L. then forward slash users forward slash me forward slash avatar.
Next up we're gonna go ahead and focus on the data we're sending across under a body.
We're gonna be sending some form and data and the key that we picked was Avatar.
This value needs to match up with the value you chose right here and mine do indeed match up.
Next up.
Back inside of postmen we are going to switch from a text value to a file value.
And I'm going to pick the file I'll go ahead and upload this one the profile picture of a robot I'll
click open click send to fire it off and what do I get I get a two hundred response over inside a visual
studio code in that avatars directory I have the very first profile picture uploaded and to preview
it and make sure it's actually what we uploaded I will just rename it adding on to the end dot JP gee
this is going to allow visual studio code to show it and right here we have that picture showing up
later on in the section we'll learn how to actually serve these images up to the browser but for now
this is just a temporary work around allowing us to build up from the basics now that we have this in
place we've seen how we can configure melter to work in our application in the next lesson we're going
to talk about how we can validate the things that are being uploaded I'm excited to get to that and
I'll see you soon.