All language subtitles for 002 Image Uploads Using Multer_ Users_Downloadly.ir_en

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.