1 00:00:01,701 --> 00:00:04,770 So let's make sure we can now update 2 00:00:04,770 --> 00:00:08,132 a product that we fetched and loaded here. 3 00:00:09,050 --> 00:00:13,730 Now, for that, in our admin.controller, 4 00:00:13,730 --> 00:00:17,010 we already do have the updateProduct action, 5 00:00:17,010 --> 00:00:18,040 which is triggered 6 00:00:18,040 --> 00:00:23,040 if a POST request is being sent to this post route here. 7 00:00:23,210 --> 00:00:24,640 Please note that there, 8 00:00:24,640 --> 00:00:27,963 we also got the id of the product that should be updated. 9 00:00:29,890 --> 00:00:33,810 So therefore, in here, we can actually get 10 00:00:33,810 --> 00:00:36,910 the request and response, as we always do. 11 00:00:36,910 --> 00:00:38,530 We can now use our model 12 00:00:38,530 --> 00:00:43,080 to update our product by that id that we got. 13 00:00:43,080 --> 00:00:46,040 And now in here, in the end, what I wanna do 14 00:00:46,040 --> 00:00:50,630 is I wanna create a new product with my Product constructor, 15 00:00:50,630 --> 00:00:54,350 but now the product data which I'll pass into that Product 16 00:00:54,350 --> 00:00:56,520 will also include an id 17 00:00:57,630 --> 00:01:00,730 so that for this product.model, 18 00:01:00,730 --> 00:01:03,080 in the constructor where I'm setting an id, 19 00:01:03,080 --> 00:01:04,599 I do get this id, 20 00:01:04,599 --> 00:01:07,260 and it has to be _id therefore 21 00:01:07,260 --> 00:01:09,320 because that's what I'm looking for 22 00:01:09,320 --> 00:01:12,283 in the productData that's received in the constructor. 23 00:01:13,660 --> 00:01:15,170 But that's not a problem. 24 00:01:15,170 --> 00:01:19,370 Here, in this object which I pass to new Product, 25 00:01:19,370 --> 00:01:23,640 I now set my title equal to req.body.title, 26 00:01:23,640 --> 00:01:26,920 summary equal to req.body.summary. 27 00:01:26,920 --> 00:01:30,830 And since I'll actually repeat all those req.body fields, 28 00:01:30,830 --> 00:01:34,260 I'll just use ...req.body 29 00:01:34,260 --> 00:01:38,143 to spread all those req.body fields into new Product. 30 00:01:40,120 --> 00:01:45,120 And I'll add the _id field which is req.params.id 31 00:01:45,290 --> 00:01:48,380 because I get the id in my request parameters 32 00:01:48,380 --> 00:01:51,603 because of that placeholder we defined on our routes. 33 00:01:53,370 --> 00:01:56,950 Now, what will be missing here is my image. 34 00:01:56,950 --> 00:01:59,420 Of course, we might choose an image here 35 00:01:59,420 --> 00:02:00,970 when we update a product, 36 00:02:00,970 --> 00:02:03,530 but unlike for creating a product, 37 00:02:03,530 --> 00:02:05,860 this should not be mandatory. 38 00:02:05,860 --> 00:02:07,030 It should be optional. 39 00:02:07,030 --> 00:02:10,360 It's optional to edit any of these fields. 40 00:02:10,360 --> 00:02:12,290 Now, all the fields, except for the image, 41 00:02:12,290 --> 00:02:14,490 still need to have some value. 42 00:02:14,490 --> 00:02:15,660 But for the image, 43 00:02:15,660 --> 00:02:18,800 since we already do have an image stored on the server, 44 00:02:18,800 --> 00:02:21,550 I am fine with that submitted form 45 00:02:21,550 --> 00:02:25,203 not having an image at all in case of updating. 46 00:02:26,280 --> 00:02:29,590 Therefore, what I actually wanna do in my template 47 00:02:29,590 --> 00:02:32,740 is I want to go to product-form 48 00:02:32,740 --> 00:02:37,240 and only enforce the image to be there 49 00:02:37,240 --> 00:02:40,620 if we are creating a new product. 50 00:02:40,620 --> 00:02:42,690 That means that here on this image, 51 00:02:42,690 --> 00:02:45,190 I do wanna add the required attribute 52 00:02:45,190 --> 00:02:47,730 but only if we are creating a new product, 53 00:02:47,730 --> 00:02:49,373 not if we are updating. 54 00:02:51,020 --> 00:02:56,020 To achieve this, I'll add a little if check here with EJS 55 00:02:56,310 --> 00:02:59,260 where we, of course, open a parenthesis here 56 00:02:59,260 --> 00:03:01,990 and then close it thereafter. 57 00:03:01,990 --> 00:03:03,850 And between those EJS tags, 58 00:03:03,850 --> 00:03:08,130 I have required this HTML attribute which will be added, 59 00:03:08,130 --> 00:03:11,240 but it will only be added if this condition is met 60 00:03:11,240 --> 00:03:15,230 and the condition could be if imageRequired. 61 00:03:17,230 --> 00:03:21,060 Of course, we now have to ensure that this imageRequired key 62 00:03:21,060 --> 00:03:23,970 is provided to the product form snippet 63 00:03:23,970 --> 00:03:27,433 from both new-product and update-product.ejs. 64 00:03:28,580 --> 00:03:30,730 In new-product.ejs, 65 00:03:30,730 --> 00:03:34,240 I will therefore pass that as another key-value pair 66 00:03:34,240 --> 00:03:39,240 to this included snippet, imageRequired, and here it's true. 67 00:03:40,330 --> 00:03:42,280 So I'll set this to true here 68 00:03:42,280 --> 00:03:44,813 because for a new product, it is required. 69 00:03:46,090 --> 00:03:48,240 For update-product, on the other hand, 70 00:03:48,240 --> 00:03:51,910 there, I'll set imageRequired to false 71 00:03:51,910 --> 00:03:53,960 because there, it's not required. 72 00:03:53,960 --> 00:03:55,493 There, it's optional. 73 00:03:56,950 --> 00:04:00,460 With that, we add this frontend validation 74 00:04:00,460 --> 00:04:03,760 only if we are adding a new product. 75 00:04:03,760 --> 00:04:07,360 So if I reload this, now we don't see any change here, 76 00:04:07,360 --> 00:04:11,090 but now we could submit this even if no image was chosen. 77 00:04:11,090 --> 00:04:13,110 If, on the other hand, we add a new product, 78 00:04:13,110 --> 00:04:14,703 that would not be possible. 79 00:04:15,920 --> 00:04:19,983 But now back to the backend code in the admin.controller, 80 00:04:21,149 --> 00:04:24,310 there, I don't provide the image to new Product. 81 00:04:24,310 --> 00:04:27,800 Now, as I just said, that's fine in case of updating. 82 00:04:27,800 --> 00:04:30,660 But, of course, I still can choose a new image 83 00:04:30,660 --> 00:04:31,860 in that case as well. 84 00:04:31,860 --> 00:04:33,393 It's just optional. 85 00:04:34,340 --> 00:04:36,720 Therefore, we also have to be prepared 86 00:04:36,720 --> 00:04:39,600 to add a new image if we have one. 87 00:04:39,600 --> 00:04:43,230 Still, I will not add one here in the constructor. 88 00:04:43,230 --> 00:04:46,830 I will simply not set any image field here in this object 89 00:04:46,830 --> 00:04:49,210 which I pass to the constructor. 90 00:04:49,210 --> 00:04:51,010 Instead, in a second step, 91 00:04:51,010 --> 00:04:55,460 I will check if req.file is truthy, 92 00:04:55,460 --> 00:04:57,950 so if we do have a file. 93 00:04:57,950 --> 00:05:00,520 If we don't add a file to the request, 94 00:05:00,520 --> 00:05:02,970 Multer won't be able to extract one, 95 00:05:02,970 --> 00:05:07,100 and req.file would be undefined and therefore falsy. 96 00:05:07,100 --> 00:05:11,440 So if it's truthy, then Multer was able to extract the file. 97 00:05:11,440 --> 00:05:15,090 And then, of course, we wanna use that new image here 98 00:05:15,090 --> 00:05:16,273 for our product. 99 00:05:17,710 --> 00:05:21,560 So that's why we then have to replace the old image 100 00:05:21,560 --> 00:05:22,780 with the new one, 101 00:05:22,780 --> 00:05:24,330 something we'll do in a second. 102 00:05:26,060 --> 00:05:27,900 Either way, what I wanna do 103 00:05:27,900 --> 00:05:30,180 is on my model, my product.model, 104 00:05:30,180 --> 00:05:33,400 I wanna ensure that we now can call the safe method. 105 00:05:33,400 --> 00:05:38,020 But in that safe method we now check whether we have an id, 106 00:05:38,020 --> 00:05:40,310 which means we are saving a product 107 00:05:40,310 --> 00:05:43,690 that was already stored in the database before, 108 00:05:43,690 --> 00:05:45,540 or if we don't have an id, 109 00:05:45,540 --> 00:05:47,780 which means we're about to add a new product, 110 00:05:47,780 --> 00:05:49,913 so what we did before thus far. 111 00:05:50,830 --> 00:05:55,240 Hence here, I will check if this.id is a thing, 112 00:05:55,240 --> 00:05:59,120 if it's truthy, which means yes, we do already have an id, 113 00:05:59,120 --> 00:06:02,230 we wanna update a product in the database. 114 00:06:02,230 --> 00:06:05,660 In that case, we'll have to write some new logic. 115 00:06:05,660 --> 00:06:07,170 Else, if we don't have an id, 116 00:06:07,170 --> 00:06:08,920 then we're adding a new product, 117 00:06:08,920 --> 00:06:11,110 then I wanna execute the old logic, 118 00:06:11,110 --> 00:06:13,223 so I'll move that into the else block. 119 00:06:15,540 --> 00:06:18,950 Now, here, if we're updating an existing image, 120 00:06:18,950 --> 00:06:23,130 what I wanna do is in the end I want to call 121 00:06:23,130 --> 00:06:27,640 db.getDb collection products 122 00:06:28,850 --> 00:06:31,873 updateOne instead of insertOne. 123 00:06:33,530 --> 00:06:38,530 Now, for updating, I want to identify a product by its id. 124 00:06:38,850 --> 00:06:41,640 And here I will use this id 125 00:06:41,640 --> 00:06:44,723 which is not a mongodb.ObjectId though. 126 00:06:45,920 --> 00:06:48,660 I want to have a mongodb.ObjectId. 127 00:06:48,660 --> 00:06:53,660 So here I'll get my productId by using new mongodb.ObjectId 128 00:06:55,210 --> 00:06:58,693 and passing this id into that just as before. 129 00:07:00,230 --> 00:07:02,300 And then I'll use this productId 130 00:07:02,300 --> 00:07:05,560 which is now such a mongodb.ObjectId here 131 00:07:05,560 --> 00:07:08,330 as a filtering condition. 132 00:07:08,330 --> 00:07:11,220 And then the second value which we pass to updateOne 133 00:07:11,220 --> 00:07:14,550 is a object where we describe the update. 134 00:07:14,550 --> 00:07:18,420 We do that with help of the special $set property 135 00:07:18,420 --> 00:07:21,000 you learned about before in the course, 136 00:07:21,000 --> 00:07:22,970 which itself takes the object 137 00:07:22,970 --> 00:07:26,170 where we now can set all the key-value pairs we want 138 00:07:26,170 --> 00:07:27,873 to new values. 139 00:07:29,020 --> 00:07:31,840 And in the end here, I wanna take my productData 140 00:07:31,840 --> 00:07:35,080 because that is a combination of key-value pairs 141 00:07:35,080 --> 00:07:37,670 with all the keys I have in the database 142 00:07:37,670 --> 00:07:40,470 and the appropriate new values. 143 00:07:40,470 --> 00:07:44,030 So that is what I use here as a value for set, 144 00:07:44,030 --> 00:07:45,600 to update all the data 145 00:07:45,600 --> 00:07:48,193 for an existing product in the database. 146 00:07:49,360 --> 00:07:51,733 And, of course, we wanna await this as well. 147 00:07:52,750 --> 00:07:54,500 This might fail as well, 148 00:07:54,500 --> 00:07:57,570 for example, because we failed to create an objectId, 149 00:07:57,570 --> 00:08:00,873 but we'll handle this in the admin.controller later. 150 00:08:01,940 --> 00:08:03,890 Of course, you would also correctly notice 151 00:08:03,890 --> 00:08:04,900 that at the moment 152 00:08:04,900 --> 00:08:08,640 we always overwrite the stored image with undefined 153 00:08:08,640 --> 00:08:11,280 because at the moment I'm not passing any image data 154 00:08:11,280 --> 00:08:12,940 into my product, 155 00:08:12,940 --> 00:08:16,000 but we'll change that soon because here I plan 156 00:08:16,000 --> 00:08:19,300 on replacing the existing image with a new one, 157 00:08:19,300 --> 00:08:22,340 and that is actually something we have to do. 158 00:08:22,340 --> 00:08:25,400 Back in product-model, let's say at the end, 159 00:08:25,400 --> 00:08:27,250 though, again, it doesn't matter, 160 00:08:27,250 --> 00:08:31,710 I'll add a new method, replaceImage, which gets a newImage 161 00:08:31,710 --> 00:08:35,039 and which will replace the old image with that new one. 162 00:08:35,039 --> 00:08:38,863 And now here I will set this image equal to newImage. 163 00:08:40,039 --> 00:08:43,429 Here I expect to get the name of the image 164 00:08:44,340 --> 00:08:46,603 as it was created by Multer. 165 00:08:47,870 --> 00:08:51,460 And I also wanna update my image path and URL. 166 00:08:51,460 --> 00:08:54,290 For that, I'll copy these two lines. 167 00:08:54,290 --> 00:08:58,020 Alternatively, we create a new helper method 168 00:08:58,020 --> 00:09:00,730 that does this updating for us. 169 00:09:00,730 --> 00:09:02,490 Actually, let's maybe do that. 170 00:09:02,490 --> 00:09:05,260 Let's cut these lines from the constructor, 171 00:09:05,260 --> 00:09:06,520 add a new method 172 00:09:07,400 --> 00:09:10,080 maybe after these static methods 173 00:09:10,080 --> 00:09:13,270 to have some kind of organization here. 174 00:09:13,270 --> 00:09:16,037 This method could be called updateImageData, 175 00:09:17,090 --> 00:09:21,570 and in there I wanna set this imagePath and this imageUrl, 176 00:09:21,570 --> 00:09:23,620 and instead of productData.image, 177 00:09:23,620 --> 00:09:28,113 we refer to this.image in both cases. 178 00:09:29,930 --> 00:09:31,980 And then it's updateImageData 179 00:09:31,980 --> 00:09:35,060 which can be called from inside the constructor. 180 00:09:35,060 --> 00:09:37,643 So here I call this.updateImageData 181 00:09:38,500 --> 00:09:39,930 in the constructor method 182 00:09:39,930 --> 00:09:41,530 after setting the image. 183 00:09:41,530 --> 00:09:43,083 The order is important. 184 00:09:44,070 --> 00:09:46,410 And then down here in replaceImage, 185 00:09:46,410 --> 00:09:48,917 I also call this.updateImageData. 186 00:09:50,450 --> 00:09:52,900 And now with that, we update the image data 187 00:09:52,900 --> 00:09:56,300 in that product object based on our class 188 00:09:56,300 --> 00:09:59,360 whenever we call replaceImage. 189 00:09:59,360 --> 00:10:03,690 Now, back in admin-controller, if we now got a new image, 190 00:10:03,690 --> 00:10:07,557 we can reach out to product and call replaceImage, 191 00:10:09,120 --> 00:10:13,230 and pass our new image which is req.file.filename, 192 00:10:13,230 --> 00:10:16,263 so the new image name to be precise, to replaceImage. 193 00:10:17,810 --> 00:10:19,540 Now, of course, we could have this scenario 194 00:10:19,540 --> 00:10:23,050 that user did not choose a new image. 195 00:10:23,050 --> 00:10:27,200 And therefore back in product-model, when we save our data, 196 00:10:27,200 --> 00:10:30,650 I still wanna check if we maybe don't have an image data 197 00:10:30,650 --> 00:10:33,020 because no new data was provided, 198 00:10:33,020 --> 00:10:36,160 and we didn't fetch the old data from the database, 199 00:10:36,160 --> 00:10:37,220 and in that case, 200 00:10:37,220 --> 00:10:40,520 I don't wanna overwrite the existing image data 201 00:10:40,520 --> 00:10:43,580 in the database with undefined. 202 00:10:43,580 --> 00:10:46,370 Therefore, in this branch of the if-else block 203 00:10:46,370 --> 00:10:48,930 where we do start updating our data, 204 00:10:48,930 --> 00:10:51,060 before we call updateOne, 205 00:10:51,060 --> 00:10:55,900 I wanna check if this.image is a thing, 206 00:10:55,900 --> 00:11:00,120 if this is truthy, which means we have some image data. 207 00:11:00,120 --> 00:11:04,610 And if that's not the case, hence the exclamation mark, 208 00:11:04,610 --> 00:11:07,410 then I don't wanna overwrite the image data 209 00:11:07,410 --> 00:11:09,913 in the database with undefined. 210 00:11:10,870 --> 00:11:13,740 We can achieve this by using a specific keyword 211 00:11:13,740 --> 00:11:15,890 which we haven't seen before in this course, 212 00:11:15,890 --> 00:11:17,793 and that's the delete keyword. 213 00:11:19,100 --> 00:11:23,563 You can execute delete entered productData.image. 214 00:11:25,510 --> 00:11:29,200 And what this does is it deletes that key-value pair 215 00:11:29,200 --> 00:11:32,410 from that productData object. 216 00:11:32,410 --> 00:11:35,810 Just setting it to null or undefined wouldn't be enough 217 00:11:35,810 --> 00:11:38,000 because then we would just overwrite 218 00:11:38,000 --> 00:11:41,753 the data in the database for the image field with null. 219 00:11:42,820 --> 00:11:45,050 Therefore, I instead called delete here 220 00:11:45,050 --> 00:11:46,800 or I used the delete keyword 221 00:11:46,800 --> 00:11:51,190 to delete this key-value pair so that it's gone entirely. 222 00:11:51,190 --> 00:11:54,960 And then the updating object which we passed to set 223 00:11:54,960 --> 00:11:57,020 will simply not have image field, 224 00:11:57,020 --> 00:12:01,290 and hence MongoDB won't even try to update the image field. 225 00:12:01,290 --> 00:12:02,810 And that's what I wanna do here 226 00:12:02,810 --> 00:12:05,420 to ensure that I'm not accidentally overwriting 227 00:12:05,420 --> 00:12:06,760 the image in the database, 228 00:12:06,760 --> 00:12:09,223 the image data in the database I should say. 229 00:12:10,410 --> 00:12:12,900 There would be alternatives to achieving this, 230 00:12:12,900 --> 00:12:15,383 but this is an approach that should work. 231 00:12:17,020 --> 00:12:19,450 Now, back in the admin-controller, 232 00:12:19,450 --> 00:12:24,080 we can use our product to call save now 233 00:12:25,270 --> 00:12:29,250 and, of course, await this since it's an async operation. 234 00:12:29,250 --> 00:12:31,900 For that, of course, turn that into a async function 235 00:12:31,900 --> 00:12:33,453 with the async keyword. 236 00:12:34,870 --> 00:12:39,250 And then, of course, also be prepared for this to fail 237 00:12:39,250 --> 00:12:42,320 by wrapping it with try-catch 238 00:12:42,320 --> 00:12:44,493 as we did it before all the time. 239 00:12:45,630 --> 00:12:48,100 And then here we get this third parameter, 240 00:12:48,100 --> 00:12:49,910 this next function, 241 00:12:49,910 --> 00:12:51,920 so that in the catch case, 242 00:12:51,920 --> 00:12:54,793 we can call next and forward our error. 243 00:12:57,080 --> 00:13:00,550 In that case, I also wanna return here 244 00:13:00,550 --> 00:13:02,580 so that we don't continue 245 00:13:02,580 --> 00:13:05,880 because otherwise if we make it past try-catch, 246 00:13:05,880 --> 00:13:08,810 my default way of handling the success here 247 00:13:08,810 --> 00:13:11,300 would be to call res.redirect, 248 00:13:11,300 --> 00:13:14,340 and redirect to /admin/products 249 00:13:14,340 --> 00:13:16,533 now that the product was updated. 250 00:13:17,670 --> 00:13:19,333 And this should do the trick. 251 00:13:20,849 --> 00:13:24,430 If I now try this, and I reload this page, 252 00:13:24,430 --> 00:13:27,150 and I add exclamation mark after a keyword, 253 00:13:27,150 --> 00:13:32,150 and I maybe change the price to 109.99 and I click Save, 254 00:13:32,350 --> 00:13:33,763 I get an error. 255 00:13:35,000 --> 00:13:40,000 I get an error that an argument must be passed in, yeah. 256 00:13:40,360 --> 00:13:42,770 That means that we have a problem 257 00:13:42,770 --> 00:13:45,433 with the id of the product. 258 00:13:46,610 --> 00:13:49,960 And let's see where this is coming from. 259 00:13:49,960 --> 00:13:54,850 If we go back to the Update Product page for this product, 260 00:13:54,850 --> 00:13:57,150 we can see that if I inspect this, 261 00:13:57,150 --> 00:14:01,040 actually the problem is that for this form, 262 00:14:01,040 --> 00:14:02,763 in the form element here, 263 00:14:03,790 --> 00:14:07,910 the submit URL has undefined as a product id. 264 00:14:07,910 --> 00:14:09,033 That's the problem. 265 00:14:09,880 --> 00:14:12,620 Now, why is the product id missing? 266 00:14:12,620 --> 00:14:13,580 Let's see. 267 00:14:13,580 --> 00:14:15,730 If we have a look at the admin.controller 268 00:14:15,730 --> 00:14:18,970 and there at the getUpdateProduct function, 269 00:14:18,970 --> 00:14:23,330 which is responsible for rendering that Update Product page, 270 00:14:23,330 --> 00:14:26,383 there I am providing my product, 271 00:14:27,410 --> 00:14:28,570 but yeah. 272 00:14:28,570 --> 00:14:31,150 In Product.findById, 273 00:14:31,150 --> 00:14:34,310 if we have a look at that method in our model, 274 00:14:34,310 --> 00:14:37,190 we do find a product by id, of course, 275 00:14:37,190 --> 00:14:38,780 but in the end what I returned there 276 00:14:38,780 --> 00:14:42,340 is my product as I get it from the database, 277 00:14:42,340 --> 00:14:47,110 so the document, the product document data in the end. 278 00:14:47,110 --> 00:14:50,910 Now, please note that in update-product.ejs, 279 00:14:50,910 --> 00:14:54,830 I'm referring to product.id here when I construct this path 280 00:14:54,830 --> 00:14:59,403 for the form submission: .id, not ._id. 281 00:15:01,260 --> 00:15:05,310 Now, .id only exists if in my product model, 282 00:15:05,310 --> 00:15:08,030 I pass productData into the constructor, 283 00:15:08,030 --> 00:15:10,890 and hence I added this id here. 284 00:15:10,890 --> 00:15:13,373 But this is not happening with findById. 285 00:15:14,300 --> 00:15:17,240 There, I just get some product from the database, 286 00:15:17,240 --> 00:15:19,730 and then in the end I just return that. 287 00:15:19,730 --> 00:15:23,680 It's never converted to an instance of this class, 288 00:15:23,680 --> 00:15:25,823 and hence it doesn't have an id field. 289 00:15:27,490 --> 00:15:29,530 So one workaround here 290 00:15:29,530 --> 00:15:33,890 would be to instead return new Product 291 00:15:33,890 --> 00:15:36,240 and pass this product document 292 00:15:36,240 --> 00:15:37,800 which we get from the database 293 00:15:37,800 --> 00:15:39,610 into this constructor function 294 00:15:39,610 --> 00:15:42,120 so that what we actually return now 295 00:15:42,120 --> 00:15:45,090 is a instance based on this product class 296 00:15:45,090 --> 00:15:47,923 and therefore an object that will have an id field. 297 00:15:49,750 --> 00:15:52,750 With that, if I reload here, 298 00:15:52,750 --> 00:15:56,550 and I now add an exclamation mark and change that price, 299 00:15:56,550 --> 00:15:58,440 and I click Save, 300 00:15:58,440 --> 00:16:01,340 this is looking a bit better, 301 00:16:01,340 --> 00:16:04,410 but now it looks like my title is gone. 302 00:16:04,410 --> 00:16:06,410 And indeed, if I find all products, 303 00:16:06,410 --> 00:16:10,310 I see that I reset all the data except for the image name. 304 00:16:10,310 --> 00:16:13,090 At least that worked, I did not overwrite that, 305 00:16:13,090 --> 00:16:15,043 but I lost all the other data. 306 00:16:16,670 --> 00:16:20,850 And the reason for my data missing and so on 307 00:16:20,850 --> 00:16:23,800 is that I forgot to add an important middleware 308 00:16:23,800 --> 00:16:25,770 to this post route. 309 00:16:25,770 --> 00:16:27,470 We might have an image in there. 310 00:16:27,470 --> 00:16:31,400 We use enctype multipart/form-data for the form, 311 00:16:31,400 --> 00:16:34,460 so we should add our imageUploadMiddleware, 312 00:16:34,460 --> 00:16:37,143 otherwise this will fail as it did before. 313 00:16:38,670 --> 00:16:41,670 That is why I accidentally erased all the data 314 00:16:41,670 --> 00:16:43,350 because without that middleware, 315 00:16:43,350 --> 00:16:47,310 without Multer being involved, no body data is parsed 316 00:16:47,310 --> 00:16:51,147 because the default body parser for form data does not work 317 00:16:51,147 --> 00:16:54,490 if the enctype is multipart/form-data 318 00:16:54,490 --> 00:16:56,623 as it is for this product form. 319 00:16:57,570 --> 00:16:59,920 So this middleware, the imageUploadMiddleware, 320 00:16:59,920 --> 00:17:03,670 needs to be added to this update post route. 321 00:17:03,670 --> 00:17:08,670 And if we do that, and we then go back and we update this, 322 00:17:09,700 --> 00:17:12,619 as I said, I erased everything but for the image, 323 00:17:12,619 --> 00:17:15,002 so I have to reenter it. 324 00:17:15,920 --> 00:17:18,780 So let's set some new values here. 325 00:17:18,780 --> 00:17:21,373 This is a great keyboard! 326 00:17:22,450 --> 00:17:24,079 Now also updated! 327 00:17:24,079 --> 00:17:25,940 If we now save that, 328 00:17:25,940 --> 00:17:30,860 the data is back here and also here in the database. 329 00:17:30,860 --> 00:17:33,820 So now this was updated here, 330 00:17:33,820 --> 00:17:36,933 let's now also try updating this with a new image. 331 00:17:37,870 --> 00:17:39,640 For this, I'll pick the existing image, 332 00:17:39,640 --> 00:17:42,630 but you should notice that the name here changes 333 00:17:42,630 --> 00:17:44,470 as soon as I updated it, 334 00:17:44,470 --> 00:17:46,933 so I'll confirm this image and click Save. 335 00:17:47,801 --> 00:17:51,170 And now if I find my products again, indeed, 336 00:17:51,170 --> 00:17:54,030 this is a slightly different name as you can tell. 337 00:17:54,030 --> 00:17:55,770 The characters here are different, 338 00:17:55,770 --> 00:17:58,280 and therefore this was updated. 339 00:17:58,280 --> 00:18:00,500 We are not deleting the old image. 340 00:18:00,500 --> 00:18:03,540 You could, of course, try to write logic for this as well. 341 00:18:03,540 --> 00:18:06,680 Here, I'm fine with keeping those images 342 00:18:06,680 --> 00:18:08,680 because it would also make sense 343 00:18:08,680 --> 00:18:13,060 that we wanna store images forever to give users or admins 344 00:18:13,060 --> 00:18:15,740 a way of rolling back to older images 345 00:18:15,740 --> 00:18:19,240 or to run our own analytics software on those images 346 00:18:19,240 --> 00:18:22,370 where we might train some machine learning models 347 00:18:22,370 --> 00:18:24,250 or anything like that. 348 00:18:24,250 --> 00:18:26,590 So I'll keep those images around here. 349 00:18:26,590 --> 00:18:27,620 But now with that, 350 00:18:27,620 --> 00:18:30,710 we are able to update with or without image, 351 00:18:30,710 --> 00:18:34,053 now also without overwriting all my data.