‫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.