All language subtitles for 007 Uploading Multiple Images_ Tours_Downloadly.ir_en

So now that the user photo upload feature

is completed, let's now learn how to upload multiple files

at the same time and also how

to process multiple images at the same time.

And so in this lecture and the next one,

we're going to be uploading and processing tour pictures.

And to start let's actually remember what kind

of images we want for our tours and also how many,

and so we should take a look at our tour model here.

And so here we have the image cover

and that is actually only one image

and then also we have the image field

which is going to be an array of images.

And typically these should be at least three images

because that is the amount of images that we have

in the tour detail page.

Right?

So again, we're going to have image cover

and images as an array.

All right.

Now the way we're going to upload

and process these images is going to be very similar

to what we did with the users,

and so let's actually go ahead into the user controller

and copy at least this initial part here

of the multer configuration.

All right, so grab that and then

in the tour controller, right here at the top,

lets put it right here and also

lets also get the multer and sharp requiring.

All right, great.

And so just like before we will store

the images in memory, all right,

and also we only allow images to pass our filter.

So in other words we only want to be able to upload images.

All right.

Then here we create or upload in

the exact same way as before,

and so now lets actually create

the middleware out of this upload.

All right.

So export dot upload tour, images, then upload.

And now here comes the different part,

so something that's going to be different

to what we did here in the users controller

because we had upload dot single.

Okay.

And so that was because we only had one single field

with a file that we wanted to upload

and so that here is the name of that field.

Right?

But now we actually have multiple files

and in one of them we have one image

and in the other one we have three images.

So, how can we do that?

Well, we're going to use upload dot fields,

and so multer is actually perfectly capable

of handling this kind of situations.

So here we pass in an array and each

of the elements is an object where we

then specify the field name.

And so the first one, remember,

is image cover, and then we say that the max count is one.

And so that means that we can only have

one field called image cover,

which is then going to be processed.

All right, and then let's do the same for our images,

so that is the other field in our database

and so here we call it images as well

and here lets say that the max count is three.

All right.

And in case that we didn't have the image cover

and if that only had one field which accepts multiple images

or multiple files at the same time,

we could have done it like this.

So we would then use upload dot array, okay?

And then the name of the field,

and then basically the max count here as a number like this.

All right?

So when there's one only, then it's upload dot single,

let's say image, when there is multiple with the same name,

then it's upload dot array and when there's basically

a mix of them, then it is upload dot fields.

Okay?

Now maybe this looks a bit complicated now,

so lets before we move on actually replicate

this kind of query in Postman, okay?

And actually before we do that,

we need to create a new tour.

All right, and actually I will do that here

in compass simply by duplicating one of

the tours that we already have.

So lets say here, the Sea Explorer,

and now I'm duplicating it.

And so here I can change what I want to have different

and this one is called The Mountain Biker,

let's say duration of five, max group size of ten,

and then what really matters is to get rid of

the image cover because that's what we want to update later

and also the images array.

Created at can also go and of course

we need to change the slug, so the mountain biker.

Okay?

And by the way we needed to create

a new tour like this so that we actually have the locations,

the summary and description, and all that stuff,

so that the tourist can correctly render in our website.

All right, so lets insert it and so

it should be somewhere here right at the end, okay.

So let's grab the ID here and now here in Postman

lets then update tour.

So we pass that in here and now in our body,

lets remember that we need to change from raw to form data.

Okay?

Let's close all of these here and also lets login here

as an admin because otherwise updating

the tour is not going to be working.

So admin@nators.io, all right.

And so now let's just recreate a body request here

similar to we just specified here.

So basically similar to what our multer upload expects,

so one image cover and three images.

So, image cover, which is a file, and so lets select that.

And so here we have these new photos for tours

and lets actually use this first one here

as the cover image and then images,

lets put that here to file as well,

and then here the other three.

And now as you see, all of them will be called images.

Okay, and we can only have a maximum of three,

at least only three of them are going

to be processed by multer, all right?

And actually here you see that we really need

to resize this one because on our website

all of them appear in this landscape format

and not portrait like we have it here.

All right?

And so that's of course why it's necessary

to also process these images, all right?

And of course we can also change other stuff here,

so lets say we want to change the price to 9-9-7, okay?

Now, I'm not going to send this request just yet

because we don't have any logic implemented

to handle it at this point, right,

because we're not really uploading it

to the file system, but only saving it to memory.

And so just to quickly take a look at them

lets actually create our next middleware here,

which is going to be the one to process these images.

So export dot resize tour images, so request, response,

and next, and now lets here log them to the console.

All right, and in case we have multiple files

it is actually on request dot files, and not just file.

All right?

So this here basically will produce request dot file

while the fields and the array

will both produce request dot files, so the plural.

All right, so then log this to the console

and then also lets call next here so that

we can actually then later finish

the request-response cycle, okay.

Give it a save and now all we need

to do in order to actually test the request is

to add these two new middlewares to the route handler.

All right, so tour routes and just like with the users,

to keep it simple here, we will only allow

uploading images on a tour update.

So down here is where we have that patch request, all right,

and so we already have a bunch of middlewares,

so protect, restrict to admins and guides,

and now lets also add tour controller dot upload tour images

and tour controller dot resize tour images.

So that's a really nice middleware stack right here, okay?

And so I think that now we're ready to actually test

the request that we created here.

And again of course it's not really going to do anything,

it's not going to be saving these images anywhere

and also not updating the database

but for now we just want to see the result in the console.

Well it should have actually updated the price

so lets quickly take a look at that.

Yeah, so the price now updated but again

the images obviously did not, all right?

And now here we have them in the console,

so lets make that a little bit bigger

and so here we have the image cover where

we got the field name, the original name,

and also the mimetype, okay, then you see the buffer here,

and so this is basically a representation of

the image in memory.

Now it's important here to note

is that actually even the image cover is an array, okay?

So when we're going to retrieve

the image from image cover we then will have

to use the first element of this array.

And then in the images, here it's obvious

that we have an array and here for each of

the images we then have an object like this.

So with the original name, tour four, three and two,

and then each of them as a buffer.

All right, so everything is nicely connected

and so all we now need to do is to basically create

this resize tour images, because this is where

the images will then be processed

and also saved to disk.

Okay, and so that is the topic of the next lecture.