Hey, that's taking care of the creating a new product with an image.
Let's take a look at the other use cases with the edit and delete.
So back to VS code then.
And we'll start off with let's close all of these down and we'll just go to our update product DTO first
of all.
Now previously this is the approach that I took.
I derived from the create product DTO.
But I'd like to make the picture upload optional when editing a product.
And let's go to our create product DTO as well.
And inside here I've got this required.
I don't want our admins to add a product into our database without an image, but I also don't want
to force them to edit or provide a new image every time they edit a product.
That would not be ideal, and I can't make the required conditional.
So to get around the fact I can't make this conditional, I'm just going to copy all of these properties
into my clipboard and go back to the update product DTO.
I'm going to paste them inside here.
I'll bring in what we need, which is the data annotations, and I will remove the create product DTO
from here and no longer derive from that.
And let's just tidy this up a little bit.
So instead of required for the iform file we'll take that out.
We'll remove the assignment of null and we'll simply make this optional.
So it's default value is going to be null.
And we are allowed not to provide this information when we edit a product.
So let's go back to the products controller and update what we need to inside there.
So we're going to start with our update product.
And now our update product could have a file inside it.
If the admin is editing that product image.
Or it could not because they're just updating one of the other properties.
So below our mapping code once again we'll just need to check this.
And we'll check to see if the what did I call it here.
Update products update product DTO dot file is not equal to null.
Then inside the conditional here we'll once again upload the new image to Cloudinary.
So I'll use var image result equals await and the image service and add image async.
And we'll use update product DTO dot file.
And we'll check the image result.
So if we get an image result dot error not equal to null, then we will return a bad request and pass
in the image results dot error dot message.
And we also want to check to see if we have a public ID with our products because if we do, we want
to delete the existing image from Cloudinary as that has now been replaced with the one that's just
been uploaded.
So we'll check and we'll check to see if not string dot is null or empty, and we'll check the product
dot public ID.
And if we do have that public ID then we're going to use await image service.
And we'll use the delete image async.
And we'll pass in the product and the public ID.
And we won't check for the success of this.
We'll presume it's going to work and the end of world scenario.
If this doesn't work, we'll delete the image.
That just means we have an image on Cloudinary that doesn't get deleted.
We could of course check the result, but I'm going to say not required for this particular instance.
And then we'll set our products.
So we'll use the products dot picture URL and we'll set this equal to the image results dot secure URL
and the absolute URI.
And we'll give it its new public ID.
So we'll use product dot public ID equals image results and the public ID.
So that will take care of the editing of a product and changing the image as well.
And if we come down to the delete product we also need to take care of this.
And we'll just use the same code again.
I'll just literally copy what we used in the editing, and I'll just paste this inside here.
So below the if product is not found then we'll just add this code in to delete the image.
Again not going to check the image results.
The priority is removing the product from the database, not worrying about if the image is left behind
on cloudinary storage.
So that will take care of those two methods.
And let's just check the status of our API.
Of course, we need to restart our API to go before we can go and test this.
And once it has restarted, we should be able to go test this.
Now.
So we've got an edit product with a file and the create product I used.
What did I use?
I used the angular boot.
So I'll edit the product with a file.
I'll change this to something different.
And I'll just use a glove and click open.
And I don't care if the product matches with the image.
That's not the goal of this particular test.
It's really just to see if the upload functionality works as we'd expect it to.
So I need to check the ID of the image that I did or the products that I created.
And this one has been given an ID of 20.
In earlier examples you would have seen an ID of 1000 and something, but I did need to drop my database
and recreate it.
So those blocks of IDs or numbers that SQL reserves is time based.
And because I very recently dropped my database, I've gone back to lower numbered IDs, in this case
ID of 20.
So that's what I'm going to use to demonstrate this.
So I'm going to swap the ID here from 19 to 20.
And let's see if this functionality is working.
So that should be what we need inside here I'll click send.
And we see the loading going on.
Which means something is happening.
And we get the 204 no content.
And then if I go and get the products and I'll get the product with the ID of 20, what we should see
is we've got our updated product.
And what this image should be is a glove.
And we can see that is indeed the case.
It's not a boot anymore, it's now a glove.
And if we just check the delete product method, I'll just update the ID of this to reflect what it
is, which is 20.
I'll click send on this and that should go across.
And great.
We get the 200 okay.
If I try and get the product again I should get the not found.
And if we do go across to Cloudinary and if we do want to check our images, then if we go to the Media
explorer inside Cloudinary and find the folder where we uploaded the images to.
If you did choose a folder, I'll just come inside here and I called it Rs course.
If I check this folder and I think I need to right click and open to get inside this folder, then there's
no images inside here now because they've been deleted.
So great that system is working.
So now we have the API side of things covered for this.
What we'll take a look at next is setting things up on the client side.
And we'll start implementing that from the next lesson.