Speaker A
so once we have done with the create and read it's time to do the update and delete the thing is uh the UI which you are working with I'm not sure it has the update and delete feature I can't see
Telusko's Spring project tutorial #27 covers adding Update and Delete features: wiring a new React UI to PUT and DELETE endpoints, building the Spring controllers, and handling image updates in the se
Key Takeaways
- Update and delete in a Spring REST API are implemented with @PutMapping and @DeleteMapping on /api/product/{id}, matching what the front-end calls.
- Multipart file uploads with product data require handling IOException when reading image bytes and storing image metadata.
- Repository save() can handle both creating and updating records, though checking for an existing ID is advisable.
What the video covers
- The video continues a Spring + React e-commerce project, moving from Create and Read to Update and Delete.
- The original UI lacked update/delete features, so a new front-end is loaded and run with npm install and npm run dev.
- The UI shows an Update and Delete button on each product; the update form lets you edit fields like category and quantity.
- The first update attempt fails because the backend has no endpoint handling the request.
- Inspecting the front-end code reveals the update call uses a PUT request to /api/product/{id}, and delete uses DELETE to the same path with only the ID.
- The update request sends three parts: the product ID, the product data, and the multipart image file.
- An updateProduct controller method is created with @PutMapping and @PathVariable, returning a response entity with success or failure status.
- The service layer's updateProduct method saves the product via the repository, setting image bytes and image name from the uploaded file, with IOException handling.
- A deleteProduct controller method using @DeleteMapping returns a 'deleted successfully' message with an OK status.
- After restarting the backend, the laptop product is successfully updated (price, category, stock, release date, images) and then deleted from the UI.
Chapters
- 00:00Introduction to Update and Delete Features
- 00:50Setting Up the New Front-End UI
- 01:36Testing Update and Identifying the Missing Endpoint
- 02:31Analyzing Front-End API Calls (PUT and DELETE)
- 05:02Creating the Update Controller Method
- 06:05Implementing Update Logic in the Service Layer
- 08:00Creating the Delete Endpoint
- 10:45Testing Update and Delete in the UI
Full Transcript — Download SRT & Markdown
Speaker A
that here so we'll be going for a new UI so we'll replace this first of all I will just stop this what was running here and let's open the new UI so I will go to file open and this is where I have
Speaker A
all the UI now this is the latest one so this Ecom uh front end for I will upload that in the I mean you will find the link in description I will open this and open so this is our new UI and we need
Speaker A
to make it work so again the same steps which we have done before I will go to terminal I will click on new terminal and here I will say okay don't restart now npm install that's the first step
Speaker A
the next step is we have to say npm uh run Dev okay so this is running I will click on this thing it is opening on some other page just take it here okay so here we got two products now
Speaker A
this is because in the database we already have uh two things have not restarted my uh database yet or the back end yet it's only the front end which is uh changed and now when I click on any
Speaker A
of the product you can see we have this button now which is update and delete I'm not sure in the old UI it was there please let me know in the comments or I will just check that after the video but
Speaker A
we got this button Now update and delete and when I click on update it should open the update form so we'll have all these details and I can change the category of this maybe I will just put that into Electronics now and the number
Speaker A
of quantities I want to make it seven uh let's skip the same image and I click on submit so it says failed to update the product try again so what went wrong of course we don't have a URL or we don't
Speaker A
have a API which will handle the update but which URL it is heading so let let me just uh check my UI so if I go here in the components I don't see update we have the update so we have update
Speaker A
product and it is the it is hitting the URL for put okay where is a put request yeah so this is a put request and we are hitting a URL which is Local Host colon 8/ API product/ ID but they put request
Speaker A
okay that's important put request and what type of data we going to send so from this we are going to send three things one of one of one thing is of course the ID next is the product and
Speaker A
the multiart uh image okay so we are going to send three things the ID the multiart image and the product so for this we have to create a API we also have a delete option I will show you the
Speaker A
delete one uh so delete product is getting called so I'm into product. jsx and yeah so this is the delete request so for delete also we have the same thing same URL but the method is different okay and in delete we don't
Speaker A
have to send the product data or uh the image we just have to to send the ID okay so these are the two URLs just remember these are the two URLs we have to work with and for this we have to
Speaker A
create the API so let's head back to our project and let's create these two controllers uh so the first controller I'm going to create is this for the update so let's say public and we are going to return the status with some
Speaker A
text so I will say response entity and it is string and I will say update product now as I mentioned we're going to accept three things but then what will be URL uh we have to use put mapping for the update and the URL is/
Speaker A
product SL the ID and that ID we have to accept here with the help of path variable so I will say path variable int ID that's the first thing apart from this we can just take it from the uh
Speaker A
post mapping you can say we are accepting these two things so I can simply use it are we copy pting we just reusing the code right that sounds better and open close so this this is the update method which we have okay so
Speaker A
when I say update who is going to update this of course I will ask ask my service to update the product so I will say update uh product and I want my update product to also return me something so
Speaker A
it should return the product which is updated and maybe based on that I will return something maybe I will say product one and here we have to send those three things you have to send ID we have to send the product and we have
Speaker A
to send the image file three things okay and if you receive the product or if if there's nothing wrong so product one if it is not equal to null in that case I I will return the new response entity by
Speaker A
sending two things I will send the text first which is updated and then I'm going to send the status which is okay or created okay okay looks good so I will say okay and else I will return new
Speaker A
response entity we'll send the message failed to update and we'll pass the status dot uh maybe bad request or bad yeah bad request works okay so uh this is the thing but then this is not working right so the actual logic goes
Speaker A
into the update prod now this is bit complex so what I will do is I will just go back here and say create method update product see it is complex because we are also working with the image if
Speaker A
it's simply product there's no problem but since we also have a image here then we have to make some changes now it's very simple actually you can simply use your repo by saying hey repo uh I want to save because even if you want to
Speaker A
update you will use a save method you can simply pass product okay U it's our it's I mean it depends upon us if you want to use the ID or if you don't want to use the ID because I can simply skip
Speaker A
ID if I want I can simply update this but there's one more issue with this what if the product is not there of course no one can send an update request the product is not there right because we are working with the UI but anyway
Speaker A
let's imagine if someone is sending a request directly with the update request and the product is not there it will create the product so maybe you can have a check if the ID is present so that for that reason we can use the ID otherwise
Speaker A
the code which I'm going to write I'm not going going to use the ID okay so what I was saying is we can uh return um we can return report. say because this will return the product and that's what
Speaker A
I'm returning here but then it will not have the image we don't have the image data right in the product so before doing this what I will do is I will uh add I will say product dot set image
Speaker A
data and I'll will pick that from the image image file do get bytes now this get bite might through an exception okay so I will add to Signature I will say thr iio exception but in the controller then we have to use TR
Speaker A
catch yeah this works but then we are throwing the exception we should return return this yeah B request okay yeah the code looks big but then if you see we have a line for try catch uh if else the simple code is just this update
Speaker A
product okay but if I go back to service this is first thing you have to set uh next I also want to set the name of the image I will say set image name and that thing I will get it from
Speaker A
the image file dot uh get original file name and the type product do set image and if you have a better option let me know I'm just drawing what I have uh explore but if you have some other way of doing this let me know in
Speaker A
the comments so what I'm doing is I'm updating the product and storing the product and this should work now and I hope this will work anything need to check it looks good maybe we'll also write the code for the delete in one go
Speaker A
I don't have to type these things again uh I will say delete mapping for which request delete mapping for SL product slash ID and here we'll write the method name as public even this will return the status so I will say response status
Speaker A
with message so I will say string and delete product this will accept the ID so I will say path variable and accept the ID we can check you know before uh deleting it we can check if the ID is
Speaker A
there uh I will go for a simple way so I will say hey service say delete delete product and pass the ID you know actually we we should check otherwise we'll not be able to return the status right uh so what I will do is I will
Speaker A
just get the product first I will say product product is equal to service. get product by ID I'll just pass this ID and we'll check first if the product is not equal to null in that case it should
Speaker A
uh Delete and return something so I return the new response entity by passing a message deleted you know we should print product successfully deleted or deleted works and then we'll send the status so HTTP status dot do we
Speaker A
have anything for deleted let's see yeah we'll go for okay okay but what if the product is not there so in the else case I will return new response entty and we'll pass the message uh product not found and return
Speaker A
the status HTTP status. not found okay but then we don't have the delete method so I will just go back here and say create the delete method and in this we'll do very simple stuff I will say uh
Speaker A
repo dot delete and pass the ID but I think for ID we have to use a different method it should be delete by ID and pass the ID that's it and now we have basically worked with two methods one is the
Speaker A
update which is the put and delete so put will work with the update uh that's what we have done here and this will send the request to the service so things should work out I'm assuming it will work so let's restart the
Speaker A
application okay looks like there's no issue Tomcat is running and now I will open my uh browser okay and in this let's click on home now the moment you say home you lost all the products because we are we have restarted the
Speaker A
application so I was add product Samsung Galaxy which should be M brand Samsung some description price let's say $99 category phone or let's give a wrong category let's say let's put it in electronics and stock is let's say 9
Speaker A
date of release 1st June I have kept everything in the images I will click on this this I hope that's a phone and now product available submit so we got the first product and okay that's here let's add one more gaming laptop not laptop
Speaker A
laptop top brand ASUS some description price $999 uh category let's also put that in electronics we'll update this as well uh stock 7 uh release date is 1 maybe we'll have release date 12th of June images of laptop product available
Speaker A
submit okay so we got two products now the first thing we are going to do is we'll update something so let's go to the first product and what I want to update maybe I want to update this description and also the stock so I
Speaker A
click on update and we'll change this description best budget Phone Stock I will reduce it to let's say six I don't want to change the image category I will we have to also change the category to mobile it was laptop it was Electronics
Speaker A
I think and click on submit and we got it says updated you can see the message here and if I click on home now let's go back to this product description got updated the stock got updated and we
Speaker A
have also changed something or maybe two things so that's how basically you can update what about delete so what I will do is I will delete this laptop here and click on delete so it says delete successfully uh I can still see here
Speaker A
maybe it was not refresh refresh it's gone okay so again the UI things UI things need to be changed but things are working out so we have worked with the update and we have worked with the delete uh so just to rate what we have
Speaker A
done is we have added the two methods one for the update product and one for the delete product in the update we are accepting three things of course we are not using ID but we can if you want to
Speaker A
check if the uh product is there or not before updating it otherwise the save method will create a new product okay so that's one thing you can check again that's up to you if you if you have done
Speaker A
it let me know in the comments others can also see your work and we have done with delete in the service basically for updating uh it's very easy actually updating we can simply use Save method but since we have also have a image that
Speaker A
that's why we have this three extra lines otherwise simply say works and delete simple line because we're not working with images we just say hey delete the product and our job will be done so that completes the basic
Speaker A
operation what we wanted to do with this I hope you have enjoyed and if you have enjoyed please do share with your friends and yeah that's it thank you so much for watching bye-bye
Topics:Spring BootREST APICRUD operationsPUT mappingDELETE mappingmultipart image uploadReacte-commerce projectTeluskoSpring tutorial
