‫In the first part of this section
‫we will be learning all about uploading images
‫with the Multer package and in this particular video
‫we will start implementing image uploads for user photos.
‫But before we start let's do some quick cleanup here
‫and get rid of this constant output of
‫the cookies that we have here.
‫So that's somewhere down here and so that's much better.
‫Now we're gonna be working on uploading user photos
‫and let's open up here the user routes, all right.
‫So, Multer is a very popular middleware
‫to handle multi-part form data, which is a form in coding
‫that's used to upload files from a form.
‫So remember how in the last section we used
‫a URL encoded form in order to update user data
‫and for that we also had to include a special middleware.
‫And so Multer is basically a middleware
‫for multi-part form data.
‫And now here is what we're gonna do.
‫We will allow the user to upload a photo
‫on the Update Me route and so instead of
‫just being able to update email and photo,
‫users will then also be able to upload their user photos.
‫So once more, let's start by installing the package
‫that we need and actually let's create a new
‫terminal window here and so NPM install Multer.
‫All right and here we see that we're on Multer 1.4.1.
‫And so again in case you run into any trouble
‫with this package please just make sure that
‫you install the same version as I'm using here.
‫All right.
‫So, let's include that here.
‫So Multer, require, Multer.
‫So, easy and now we need to configure a so called
‫Multer upload and then use it.
‫And let's do that right here at the beginning
‫and let's call it Upload and we call the Multer function
‫that we just included before and then pass
‫in an object for some options.
‫And for now the only option that we're gonna specify
‫is the destination and I'm gonna set
‫it to Public/image/users, all right.
‫And so that is exactly the folder
‫where we want to save all the images
‫that are being uploaded.
‫So that's here, Public, Image and Users,
‫such as all the images for all the users
‫that we already have in our database.
‫Right and of course we can configure this in
‫a much more complex way and we're gonna be doing
‫that in our next lecture but for now
‫I really want you to just introduce to this package
‫and by the way, we could actually just have called
‫the Multer function without any options in there.
‫So without this here and then the uploaded image
‫would simply be stored in memory and not saved anywhere to
‫the disc but of course at this point that's not what we want
‫and so we at least need to specify this destination option.
‫And with this our file is then really uploaded
‫into a directory in our file system.
‫And I mentioned this before but let's just
‫make really sure that we're on the same page about this,
‫which is that of course images are not directly
‫uploaded into the database, we just upload them
‫into our file system and then in the database
‫we put a link basically to that image.
‫So in this case in each user document we will
‫have to name all of the uploaded file, okay.
‫Now again, we're not doing that in this video
‫but we will do a bit later.
‫For now let's just make this work.
‫Anyway, what we need to do now is to use this
‫upload here to really create a middleware function
‫that we can put here into the Update Me route.
‫So here, and it works like this.
‫So upload, dot single, and it's single because
‫here we only want to update one single image
‫and then here into single we pass the name of the field
‫that is going to hold the image to upload.
‫And so that will be photo, okay.
‫And with field I mean the field in the form
‫that is going to be uploading the image.
‫All right, it makes sense?
‫So again, we included the Multer package
‫and then with that we created an upload.
‫And this upload is just to define a couple of settings
‫where in this example we only define the destination
‫then we use that upload to create a new middleware
‫that we can then add to this stack of the route
‫that we want to use to upload the file.
‫So for that we say upload dot single
‫because we only have one single file
‫and then finally we specify the name of the field
‫that is going to hold this file.
‫Okay, and so this middleware will then take care
‫of taking the file and basically copying it
‫to the destination that we specified.
‫And then after that of course it will call
‫the next middleware in the stack which is Update Me.
‫Also, this middleware here will put the file
‫or at least some information about the file
‫on the request object and so let's
‫actually take a look at that.
‫So let's go to the Update Me function.
‫So right here and right here at the beginning
‫let's say console dot log, reg dot file.
‫All right?
‫And also I want to take a look at the body.
‫Great and so with this we're now actually ready
‫to test this and for now we will be testing it
‫in postman but of course later on we will
‫also add this functionality to the form, all right.
‫So let's go to postman here and to Update Me.
‫So basically to update the current user.
‫And the user that I want to update is called Leo,
‫so let's get him here from Compass,
‫or actually I think that's not even necessary
‫because in our login we already have this kind
‫of email address and his email is leo@example.com
‫and the password is always the same.
‫And so we of course first need to login as the user
‫and so now let's go ahead and then update to the user.
‫So in the body we have the name and the role.
‫So let's only update, let's say the name here.
‫So the current name is Leo Gillespie or Gillespie,
‫not sure how to say that.
‫Let's just add something here in the middle, okay.
‫And now finally we specify the photo property,
‫or actually we should not do it like this
‫but instead we should go here to form data, okay,
‫because this is the way how we can
‫send multi-part form data, all right.
‫So, let's copy just the name here and it's Name.
‫All right, so here the key is Name and
‫then the value is this one.
‫Next up, we then finally specify the photo field
‫and then here we can actually specify what we want.
‫And so instead of text which is the default
‫we can specify file and then here we can select
‫the file that we want to upload.
‫So that file, that image, is here in our def data again,
‫then in image and then here the image of Leo.
‫And so that's why it shows this user.
‫Okay, so click open and now I think
‫we're ready to send that request.
‫All right, we were successful and of course as I said before
‫the photo did obviously not update here in the database
‫output because that's for the next lecture.
‫For now we just want to really upload this image
‫to that folder that we specified.
‫All right, now let's also take a look here at our output
‫and so here we have request dot file, which is this one,
‫and so we get all kinds of information about it.
‫So the original name, it's destination that we specified,
‫the new file name here, and also the size.
‫Okay, so that is request dot file and then remember
‫we also logged the body.
‫And so the body is now only the name, all right.
‫So our body parse is not really able to handle files
‫and so that's why the file is not showing up
‫in the body at all and of course that
‫is the whole reason why we actually need the Multer package.
‫Anyway, let's now take a look at our folder and so here
‫we have image, users, and then somewhere here
‫should be the image that we just uploaded
‫but I can't really see it here.
‫Let's update, ah and indeed here it is.
‫So if we click it now we cannot really see it
‫because as you can see here it
‫doesn't even have an extension, okay.
‫And so that's why we cannot really open it at this point.
‫So the file really showed up here in our folder
‫and so we have the upload actually working.
‫Well, at least kind of but we're not really
‫where we want it, right.
‫So we want to give it a better file name
‫and we also want to re-organize this
‫code that we have at this point a little bit.
‫And so let's do that in the next video.