WEBVTT 00:00.020 --> 00:03.410 Hey, that's taking care of the creating a new product with an image. 00:03.410 --> 00:07.910 Let's take a look at the other use cases with the edit and delete. 00:08.120 --> 00:10.160 So back to VS code then. 00:10.160 --> 00:17.750 And we'll start off with let's close all of these down and we'll just go to our update product DTO first 00:17.750 --> 00:18.290 of all. 00:18.320 --> 00:21.500 Now previously this is the approach that I took. 00:21.500 --> 00:23.870 I derived from the create product DTO. 00:23.960 --> 00:29.090 But I'd like to make the picture upload optional when editing a product. 00:29.090 --> 00:33.050 And let's go to our create product DTO as well. 00:33.050 --> 00:35.300 And inside here I've got this required. 00:35.300 --> 00:41.960 I don't want our admins to add a product into our database without an image, but I also don't want 00:41.960 --> 00:47.480 to force them to edit or provide a new image every time they edit a product. 00:47.480 --> 00:52.580 That would not be ideal, and I can't make the required conditional. 00:53.510 --> 01:00.260 So to get around the fact I can't make this conditional, I'm just going to copy all of these properties 01:00.580 --> 01:05.920 into my clipboard and go back to the update product DTO. 01:05.950 --> 01:08.770 I'm going to paste them inside here. 01:08.860 --> 01:16.870 I'll bring in what we need, which is the data annotations, and I will remove the create product DTO 01:16.870 --> 01:21.190 from here and no longer derive from that. 01:21.460 --> 01:24.130 And let's just tidy this up a little bit. 01:24.130 --> 01:28.900 So instead of required for the iform file we'll take that out. 01:28.900 --> 01:33.850 We'll remove the assignment of null and we'll simply make this optional. 01:33.850 --> 01:35.770 So it's default value is going to be null. 01:35.770 --> 01:42.190 And we are allowed not to provide this information when we edit a product. 01:42.190 --> 01:47.530 So let's go back to the products controller and update what we need to inside there. 01:48.040 --> 01:50.740 So we're going to start with our update product. 01:50.740 --> 01:54.280 And now our update product could have a file inside it. 01:54.310 --> 01:58.150 If the admin is editing that product image. 01:59.050 --> 02:02.740 Or it could not because they're just updating one of the other properties. 02:02.740 --> 02:06.400 So below our mapping code once again we'll just need to check this. 02:06.400 --> 02:09.850 And we'll check to see if the what did I call it here. 02:09.850 --> 02:15.460 Update products update product DTO dot file is not equal to null. 02:16.270 --> 02:23.200 Then inside the conditional here we'll once again upload the new image to Cloudinary. 02:23.200 --> 02:32.140 So I'll use var image result equals await and the image service and add image async. 02:32.140 --> 02:35.590 And we'll use update product DTO dot file. 02:36.400 --> 02:38.320 And we'll check the image result. 02:38.320 --> 02:51.670 So if we get an image result dot error not equal to null, then we will return a bad request and pass 02:51.670 --> 02:55.480 in the image results dot error dot message. 02:55.840 --> 03:03.360 And we also want to check to see if we have a public ID with our products because if we do, we want 03:03.360 --> 03:08.130 to delete the existing image from Cloudinary as that has now been replaced with the one that's just 03:08.130 --> 03:08.880 been uploaded. 03:08.880 --> 03:18.870 So we'll check and we'll check to see if not string dot is null or empty, and we'll check the product 03:18.900 --> 03:20.010 dot public ID. 03:20.400 --> 03:27.060 And if we do have that public ID then we're going to use await image service. 03:27.840 --> 03:30.450 And we'll use the delete image async. 03:31.110 --> 03:34.590 And we'll pass in the product and the public ID. 03:34.980 --> 03:38.640 And we won't check for the success of this. 03:38.670 --> 03:43.590 We'll presume it's going to work and the end of world scenario. 03:43.590 --> 03:45.600 If this doesn't work, we'll delete the image. 03:45.600 --> 03:48.960 That just means we have an image on Cloudinary that doesn't get deleted. 03:48.960 --> 03:54.360 We could of course check the result, but I'm going to say not required for this particular instance. 03:54.390 --> 03:56.970 And then we'll set our products. 03:56.970 --> 04:03.690 So we'll use the products dot picture URL and we'll set this equal to the image results dot secure URL 04:03.690 --> 04:06.240 and the absolute URI. 04:06.450 --> 04:08.730 And we'll give it its new public ID. 04:08.730 --> 04:16.260 So we'll use product dot public ID equals image results and the public ID. 04:18.030 --> 04:24.780 So that will take care of the editing of a product and changing the image as well. 04:24.780 --> 04:29.340 And if we come down to the delete product we also need to take care of this. 04:29.340 --> 04:31.470 And we'll just use the same code again. 04:31.500 --> 04:37.410 I'll just literally copy what we used in the editing, and I'll just paste this inside here. 04:37.410 --> 04:44.490 So below the if product is not found then we'll just add this code in to delete the image. 04:44.520 --> 04:47.460 Again not going to check the image results. 04:47.460 --> 04:52.710 The priority is removing the product from the database, not worrying about if the image is left behind 04:52.710 --> 04:54.540 on cloudinary storage. 04:54.540 --> 04:56.580 So that will take care of those two methods. 04:56.580 --> 04:58.560 And let's just check the status of our API. 04:58.590 --> 05:02.900 Of course, we need to restart our API to go before we can go and test this. 05:04.010 --> 05:07.250 And once it has restarted, we should be able to go test this. 05:07.280 --> 05:07.700 Now. 05:07.700 --> 05:13.010 So we've got an edit product with a file and the create product I used. 05:13.040 --> 05:13.970 What did I use? 05:13.970 --> 05:16.760 I used the angular boot. 05:16.790 --> 05:18.860 So I'll edit the product with a file. 05:18.860 --> 05:22.520 I'll change this to something different. 05:23.150 --> 05:27.320 And I'll just use a glove and click open. 05:28.310 --> 05:30.860 And I don't care if the product matches with the image. 05:30.860 --> 05:32.570 That's not the goal of this particular test. 05:32.570 --> 05:37.730 It's really just to see if the upload functionality works as we'd expect it to. 05:37.850 --> 05:42.980 So I need to check the ID of the image that I did or the products that I created. 05:42.980 --> 05:48.110 And this one has been given an ID of 20. 05:48.290 --> 05:55.010 In earlier examples you would have seen an ID of 1000 and something, but I did need to drop my database 05:55.010 --> 05:56.300 and recreate it. 05:56.390 --> 06:01.810 So those blocks of IDs or numbers that SQL reserves is time based. 06:01.810 --> 06:07.840 And because I very recently dropped my database, I've gone back to lower numbered IDs, in this case 06:07.870 --> 06:08.800 ID of 20. 06:08.800 --> 06:11.560 So that's what I'm going to use to demonstrate this. 06:11.560 --> 06:16.300 So I'm going to swap the ID here from 19 to 20. 06:16.330 --> 06:19.570 And let's see if this functionality is working. 06:19.570 --> 06:23.050 So that should be what we need inside here I'll click send. 06:23.500 --> 06:25.720 And we see the loading going on. 06:25.720 --> 06:27.190 Which means something is happening. 06:27.190 --> 06:30.010 And we get the 204 no content. 06:30.220 --> 06:36.640 And then if I go and get the products and I'll get the product with the ID of 20, what we should see 06:36.640 --> 06:39.610 is we've got our updated product. 06:39.610 --> 06:44.200 And what this image should be is a glove. 06:44.710 --> 06:47.110 And we can see that is indeed the case. 06:47.110 --> 06:49.450 It's not a boot anymore, it's now a glove. 06:49.960 --> 06:55.390 And if we just check the delete product method, I'll just update the ID of this to reflect what it 06:55.390 --> 06:57.250 is, which is 20. 06:57.280 --> 07:01.330 I'll click send on this and that should go across. 07:01.330 --> 07:02.770 And great. 07:02.800 --> 07:04.150 We get the 200 okay. 07:04.150 --> 07:08.080 If I try and get the product again I should get the not found. 07:08.080 --> 07:15.760 And if we do go across to Cloudinary and if we do want to check our images, then if we go to the Media 07:15.790 --> 07:24.370 explorer inside Cloudinary and find the folder where we uploaded the images to. 07:24.400 --> 07:30.400 If you did choose a folder, I'll just come inside here and I called it Rs course. 07:30.430 --> 07:38.380 If I check this folder and I think I need to right click and open to get inside this folder, then there's 07:38.380 --> 07:41.770 no images inside here now because they've been deleted. 07:42.310 --> 07:47.140 So great that system is working. 07:47.380 --> 07:50.350 So now we have the API side of things covered for this. 07:50.380 --> 07:54.130 What we'll take a look at next is setting things up on the client side. 07:54.130 --> 07:57.670 And we'll start implementing that from the next lesson.