1 00:00:01,140 --> 00:00:03,990 ‫So now that the user photo upload feature 2 00:00:03,990 --> 00:00:08,080 ‫is completed, let's now learn how to upload multiple files 3 00:00:08,080 --> 00:00:10,080 ‫at the same time and also how 4 00:00:10,080 --> 00:00:13,170 ‫to process multiple images at the same time. 5 00:00:13,170 --> 00:00:15,430 ‫And so in this lecture and the next one, 6 00:00:15,430 --> 00:00:18,713 ‫we're going to be uploading and processing tour pictures. 7 00:00:20,770 --> 00:00:23,750 ‫And to start let's actually remember what kind 8 00:00:23,750 --> 00:00:28,070 ‫of images we want for our tours and also how many, 9 00:00:28,070 --> 00:00:31,033 ‫and so we should take a look at our tour model here. 10 00:00:32,450 --> 00:00:37,450 ‫And so here we have the image cover 11 00:00:38,050 --> 00:00:40,170 ‫and that is actually only one image 12 00:00:40,170 --> 00:00:42,400 ‫and then also we have the image field 13 00:00:42,400 --> 00:00:45,610 ‫which is going to be an array of images. 14 00:00:45,610 --> 00:00:48,390 ‫And typically these should be at least three images 15 00:00:48,390 --> 00:00:51,000 ‫because that is the amount of images that we have 16 00:00:51,000 --> 00:00:52,950 ‫in the tour detail page. 17 00:00:52,950 --> 00:00:53,810 ‫Right? 18 00:00:53,810 --> 00:00:56,010 ‫So again, we're going to have image cover 19 00:00:56,010 --> 00:00:58,290 ‫and images as an array. 20 00:00:58,290 --> 00:00:59,410 ‫All right. 21 00:00:59,410 --> 00:01:01,240 ‫Now the way we're going to upload 22 00:01:01,240 --> 00:01:04,080 ‫and process these images is going to be very similar 23 00:01:04,080 --> 00:01:06,140 ‫to what we did with the users, 24 00:01:06,140 --> 00:01:09,620 ‫and so let's actually go ahead into the user controller 25 00:01:09,620 --> 00:01:13,444 ‫and copy at least this initial part here 26 00:01:13,444 --> 00:01:15,820 ‫of the multer configuration. 27 00:01:15,820 --> 00:01:18,620 ‫All right, so grab that and then 28 00:01:18,620 --> 00:01:21,883 ‫in the tour controller, right here at the top, 29 00:01:23,130 --> 00:01:25,774 ‫lets put it right here and also 30 00:01:25,774 --> 00:01:29,293 ‫lets also get the multer and sharp requiring. 31 00:01:33,410 --> 00:01:37,610 ‫All right, great. 32 00:01:37,610 --> 00:01:39,850 ‫And so just like before we will store 33 00:01:39,850 --> 00:01:42,750 ‫the images in memory, all right, 34 00:01:42,750 --> 00:01:46,900 ‫and also we only allow images to pass our filter. 35 00:01:46,900 --> 00:01:51,720 ‫So in other words we only want to be able to upload images. 36 00:01:51,720 --> 00:01:52,553 ‫All right. 37 00:01:52,553 --> 00:01:54,670 ‫Then here we create or upload in 38 00:01:54,670 --> 00:01:57,060 ‫the exact same way as before, 39 00:01:57,060 --> 00:01:58,180 ‫and so now lets actually create 40 00:01:58,180 --> 00:02:01,420 ‫the middleware out of this upload. 41 00:02:01,420 --> 00:02:02,780 ‫All right. 42 00:02:02,780 --> 00:02:07,780 ‫So export dot upload tour, images, then upload. 43 00:02:12,540 --> 00:02:14,536 ‫And now here comes the different part, 44 00:02:14,536 --> 00:02:17,020 ‫so something that's going to be different 45 00:02:17,020 --> 00:02:19,650 ‫to what we did here in the users controller 46 00:02:19,650 --> 00:02:24,380 ‫because we had upload dot single. 47 00:02:24,380 --> 00:02:25,213 ‫Okay. 48 00:02:25,213 --> 00:02:28,110 ‫And so that was because we only had one single field 49 00:02:28,110 --> 00:02:30,000 ‫with a file that we wanted to upload 50 00:02:30,000 --> 00:02:32,930 ‫and so that here is the name of that field. 51 00:02:32,930 --> 00:02:33,763 ‫Right? 52 00:02:33,763 --> 00:02:36,150 ‫But now we actually have multiple files 53 00:02:36,150 --> 00:02:38,490 ‫and in one of them we have one image 54 00:02:38,490 --> 00:02:40,920 ‫and in the other one we have three images. 55 00:02:40,920 --> 00:02:42,537 ‫So, how can we do that? 56 00:02:42,537 --> 00:02:47,010 ‫Well, we're going to use upload dot fields, 57 00:02:47,010 --> 00:02:49,850 ‫and so multer is actually perfectly capable 58 00:02:49,850 --> 00:02:52,280 ‫of handling this kind of situations. 59 00:02:52,280 --> 00:02:54,570 ‫So here we pass in an array and each 60 00:02:54,570 --> 00:02:57,520 ‫of the elements is an object where we 61 00:02:57,520 --> 00:02:59,283 ‫then specify the field name. 62 00:03:01,020 --> 00:03:02,420 ‫And so the first one, remember, 63 00:03:02,420 --> 00:03:07,420 ‫is image cover, and then we say that the max count is one. 64 00:03:09,920 --> 00:03:11,820 ‫And so that means that we can only have 65 00:03:11,820 --> 00:03:14,220 ‫one field called image cover, 66 00:03:14,220 --> 00:03:16,730 ‫which is then going to be processed. 67 00:03:16,730 --> 00:03:20,163 ‫All right, and then let's do the same for our images, 68 00:03:21,910 --> 00:03:24,210 ‫so that is the other field in our database 69 00:03:24,210 --> 00:03:26,300 ‫and so here we call it images as well 70 00:03:27,400 --> 00:03:30,683 ‫and here lets say that the max count is three. 71 00:03:31,950 --> 00:03:32,783 ‫All right. 72 00:03:34,440 --> 00:03:37,350 ‫And in case that we didn't have the image cover 73 00:03:37,350 --> 00:03:41,340 ‫and if that only had one field which accepts multiple images 74 00:03:41,340 --> 00:03:43,870 ‫or multiple files at the same time, 75 00:03:43,870 --> 00:03:45,483 ‫we could have done it like this. 76 00:03:46,990 --> 00:03:51,910 ‫So we would then use upload dot array, okay? 77 00:03:51,910 --> 00:03:53,460 ‫And then the name of the field, 78 00:03:55,920 --> 00:04:00,730 ‫and then basically the max count here as a number like this. 79 00:04:00,730 --> 00:04:01,640 ‫All right? 80 00:04:01,640 --> 00:04:06,120 ‫So when there's one only, then it's upload dot single, 81 00:04:09,520 --> 00:04:13,240 ‫let's say image, when there is multiple with the same name, 82 00:04:13,240 --> 00:04:16,330 ‫then it's upload dot array and when there's basically 83 00:04:16,330 --> 00:04:19,303 ‫a mix of them, then it is upload dot fields. 84 00:04:21,330 --> 00:04:22,750 ‫Okay? 85 00:04:22,750 --> 00:04:25,300 ‫Now maybe this looks a bit complicated now, 86 00:04:25,300 --> 00:04:28,320 ‫so lets before we move on actually replicate 87 00:04:28,320 --> 00:04:31,630 ‫this kind of query in Postman, okay? 88 00:04:31,630 --> 00:04:33,750 ‫And actually before we do that, 89 00:04:33,750 --> 00:04:35,523 ‫we need to create a new tour. 90 00:04:37,190 --> 00:04:39,280 ‫All right, and actually I will do that here 91 00:04:39,280 --> 00:04:42,490 ‫in compass simply by duplicating one of 92 00:04:42,490 --> 00:04:44,330 ‫the tours that we already have. 93 00:04:44,330 --> 00:04:46,623 ‫So lets say here, the Sea Explorer, 94 00:04:47,920 --> 00:04:49,680 ‫and now I'm duplicating it. 95 00:04:49,680 --> 00:04:53,780 ‫And so here I can change what I want to have different 96 00:04:53,780 --> 00:04:56,743 ‫and this one is called The Mountain Biker, 97 00:04:59,270 --> 00:05:04,263 ‫let's say duration of five, max group size of ten, 98 00:05:05,190 --> 00:05:08,120 ‫and then what really matters is to get rid of 99 00:05:08,120 --> 00:05:12,840 ‫the image cover because that's what we want to update later 100 00:05:12,840 --> 00:05:14,453 ‫and also the images array. 101 00:05:15,640 --> 00:05:20,300 ‫Created at can also go and of course 102 00:05:20,300 --> 00:05:25,300 ‫we need to change the slug, so the mountain biker. 103 00:05:27,780 --> 00:05:28,710 ‫Okay? 104 00:05:28,710 --> 00:05:30,390 ‫And by the way we needed to create 105 00:05:30,390 --> 00:05:34,200 ‫a new tour like this so that we actually have the locations, 106 00:05:34,200 --> 00:05:36,970 ‫the summary and description, and all that stuff, 107 00:05:36,970 --> 00:05:41,030 ‫so that the tourist can correctly render in our website. 108 00:05:41,030 --> 00:05:44,770 ‫All right, so lets insert it and so 109 00:05:44,770 --> 00:05:49,270 ‫it should be somewhere here right at the end, okay. 110 00:05:49,270 --> 00:05:54,270 ‫So let's grab the ID here and now here in Postman 111 00:05:55,070 --> 00:05:59,020 ‫lets then update tour. 112 00:05:59,020 --> 00:06:02,960 ‫So we pass that in here and now in our body, 113 00:06:02,960 --> 00:06:07,960 ‫lets remember that we need to change from raw to form data. 114 00:06:08,104 --> 00:06:09,103 ‫Okay? 115 00:06:11,490 --> 00:06:16,490 ‫Let's close all of these here and also lets login here 116 00:06:17,090 --> 00:06:20,210 ‫as an admin because otherwise updating 117 00:06:20,210 --> 00:06:22,010 ‫the tour is not going to be working. 118 00:06:23,070 --> 00:06:28,070 ‫So admin@nators.io, all right. 119 00:06:31,740 --> 00:06:35,508 ‫And so now let's just recreate a body request here 120 00:06:35,508 --> 00:06:38,210 ‫similar to we just specified here. 121 00:06:38,210 --> 00:06:42,070 ‫So basically similar to what our multer upload expects, 122 00:06:42,070 --> 00:06:44,973 ‫so one image cover and three images. 123 00:06:47,060 --> 00:06:52,060 ‫So, image cover, which is a file, and so lets select that. 124 00:06:55,670 --> 00:06:58,630 ‫And so here we have these new photos for tours 125 00:06:59,660 --> 00:07:02,050 ‫and lets actually use this first one here 126 00:07:02,050 --> 00:07:05,837 ‫as the cover image and then images, 127 00:07:08,450 --> 00:07:12,290 ‫lets put that here to file as well, 128 00:07:12,290 --> 00:07:14,543 ‫and then here the other three. 129 00:07:16,420 --> 00:07:19,943 ‫And now as you see, all of them will be called images. 130 00:07:26,440 --> 00:07:29,940 ‫Okay, and we can only have a maximum of three, 131 00:07:29,940 --> 00:07:32,070 ‫at least only three of them are going 132 00:07:32,070 --> 00:07:34,680 ‫to be processed by multer, all right? 133 00:07:37,620 --> 00:07:40,490 ‫And actually here you see that we really need 134 00:07:40,490 --> 00:07:43,380 ‫to resize this one because on our website 135 00:07:43,380 --> 00:07:46,090 ‫all of them appear in this landscape format 136 00:07:46,090 --> 00:07:48,550 ‫and not portrait like we have it here. 137 00:07:48,550 --> 00:07:49,383 ‫All right? 138 00:07:49,383 --> 00:07:51,139 ‫And so that's of course why it's necessary 139 00:07:51,139 --> 00:07:55,940 ‫to also process these images, all right? 140 00:07:55,940 --> 00:07:58,590 ‫And of course we can also change other stuff here, 141 00:07:58,590 --> 00:08:03,563 ‫so lets say we want to change the price to 9-9-7, okay? 142 00:08:05,610 --> 00:08:09,690 ‫Now, I'm not going to send this request just yet 143 00:08:09,690 --> 00:08:12,500 ‫because we don't have any logic implemented 144 00:08:12,500 --> 00:08:15,280 ‫to handle it at this point, right, 145 00:08:15,280 --> 00:08:17,260 ‫because we're not really uploading it 146 00:08:17,260 --> 00:08:21,360 ‫to the file system, but only saving it to memory. 147 00:08:21,360 --> 00:08:23,870 ‫And so just to quickly take a look at them 148 00:08:23,870 --> 00:08:26,808 ‫lets actually create our next middleware here, 149 00:08:26,808 --> 00:08:29,913 ‫which is going to be the one to process these images. 150 00:08:31,250 --> 00:08:36,250 ‫So export dot resize tour images, so request, response, 151 00:08:42,810 --> 00:08:47,810 ‫and next, and now lets here log them to the console. 152 00:08:50,620 --> 00:08:53,840 ‫All right, and in case we have multiple files 153 00:08:53,840 --> 00:08:58,520 ‫it is actually on request dot files, and not just file. 154 00:08:58,520 --> 00:08:59,610 ‫All right? 155 00:08:59,610 --> 00:09:02,460 ‫So this here basically will produce request dot file 156 00:09:04,030 --> 00:09:07,870 ‫while the fields and the array 157 00:09:07,870 --> 00:09:12,603 ‫will both produce request dot files, so the plural. 158 00:09:14,215 --> 00:09:16,420 ‫All right, so then log this to the console 159 00:09:16,420 --> 00:09:19,690 ‫and then also lets call next here so that 160 00:09:19,690 --> 00:09:21,440 ‫we can actually then later finish 161 00:09:21,440 --> 00:09:25,000 ‫the request-response cycle, okay. 162 00:09:25,000 --> 00:09:26,730 ‫Give it a save and now all we need 163 00:09:26,730 --> 00:09:29,700 ‫to do in order to actually test the request is 164 00:09:29,700 --> 00:09:32,790 ‫to add these two new middlewares to the route handler. 165 00:09:32,790 --> 00:09:37,130 ‫All right, so tour routes and just like with the users, 166 00:09:37,130 --> 00:09:39,600 ‫to keep it simple here, we will only allow 167 00:09:39,600 --> 00:09:41,953 ‫uploading images on a tour update. 168 00:09:43,360 --> 00:09:48,360 ‫So down here is where we have that patch request, all right, 169 00:09:49,280 --> 00:09:52,320 ‫and so we already have a bunch of middlewares, 170 00:09:52,320 --> 00:09:56,180 ‫so protect, restrict to admins and guides, 171 00:09:56,180 --> 00:10:01,180 ‫and now lets also add tour controller dot upload tour images 172 00:10:03,160 --> 00:10:08,160 ‫and tour controller dot resize tour images. 173 00:10:08,360 --> 00:10:13,130 ‫So that's a really nice middleware stack right here, okay? 174 00:10:13,130 --> 00:10:16,000 ‫And so I think that now we're ready to actually test 175 00:10:16,000 --> 00:10:18,890 ‫the request that we created here. 176 00:10:18,890 --> 00:10:21,830 ‫And again of course it's not really going to do anything, 177 00:10:21,830 --> 00:10:24,500 ‫it's not going to be saving these images anywhere 178 00:10:24,500 --> 00:10:26,780 ‫and also not updating the database 179 00:10:26,780 --> 00:10:30,453 ‫but for now we just want to see the result in the console. 180 00:10:31,370 --> 00:10:34,290 ‫Well it should have actually updated the price 181 00:10:34,290 --> 00:10:37,010 ‫so lets quickly take a look at that. 182 00:10:37,010 --> 00:10:39,790 ‫Yeah, so the price now updated but again 183 00:10:39,790 --> 00:10:43,200 ‫the images obviously did not, all right? 184 00:10:43,200 --> 00:10:46,810 ‫And now here we have them in the console, 185 00:10:46,810 --> 00:10:49,843 ‫so lets make that a little bit bigger 186 00:10:49,843 --> 00:10:53,400 ‫and so here we have the image cover where 187 00:10:53,400 --> 00:10:56,520 ‫we got the field name, the original name, 188 00:10:56,520 --> 00:11:00,620 ‫and also the mimetype, okay, then you see the buffer here, 189 00:11:00,620 --> 00:11:03,230 ‫and so this is basically a representation of 190 00:11:03,230 --> 00:11:05,240 ‫the image in memory. 191 00:11:05,240 --> 00:11:06,810 ‫Now it's important here to note 192 00:11:06,810 --> 00:11:10,953 ‫is that actually even the image cover is an array, okay? 193 00:11:12,290 --> 00:11:13,590 ‫So when we're going to retrieve 194 00:11:13,590 --> 00:11:16,480 ‫the image from image cover we then will have 195 00:11:16,480 --> 00:11:19,660 ‫to use the first element of this array. 196 00:11:19,660 --> 00:11:22,380 ‫And then in the images, here it's obvious 197 00:11:22,380 --> 00:11:24,700 ‫that we have an array and here for each of 198 00:11:24,700 --> 00:11:28,080 ‫the images we then have an object like this. 199 00:11:28,080 --> 00:11:32,530 ‫So with the original name, tour four, three and two, 200 00:11:32,530 --> 00:11:34,363 ‫and then each of them as a buffer. 201 00:11:36,030 --> 00:11:40,860 ‫All right, so everything is nicely connected 202 00:11:40,860 --> 00:11:45,353 ‫and so all we now need to do is to basically create 203 00:11:46,290 --> 00:11:49,300 ‫this resize tour images, because this is where 204 00:11:49,300 --> 00:11:51,290 ‫the images will then be processed 205 00:11:51,290 --> 00:11:53,210 ‫and also saved to disk. 206 00:11:53,210 --> 00:11:56,903 ‫Okay, and so that is the topic of the next lecture.