**#27 Project using Spring | Update and Delete — Transcript & Summary | SozAI**
Source: https://sozai.app/transcript/spring-project-update-delete/

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

1. 00:00 Introduction to Update and Delete Features
2. 00:50 Setting Up the New Front-End UI
3. 01:36 Testing Update and Identifying the Missing Endpoint
4. 02:31 Analyzing Front-End API Calls (PUT and DELETE)
5. 05:02 Creating the Update Controller Method
6. 06:05 Implementing Update Logic in the Service Layer
7. 08:00 Creating the Delete Endpoint
8. 10:45 Testing Update and Delete in the UI

Answers

## Questions about this video

Why did the update request fail in the UI at first?

The backend had no controller handling the PUT request to /api/product/{id}, so the front-end's update call had no matching endpoint. Creating the update controller method resolves this.

What data does the update endpoint need to receive?

It receives three parts: the product ID as a path variable, the product data, and the multipart image file. The image bytes and original file name are set on the product before saving.

How is the delete feature implemented?

A DELETE mapping at /api/product/{id} accepts the ID as a path variable, calls the service to delete the product, and returns a success message with an OK status.

## Full Transcript — Download SRT & Markdown

00:00

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

00:12

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

00:24

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

00:38

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

00:50

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

01:04

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

01:15

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

01:24

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

01:36

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

01:49

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

02:02

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

02:19

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

02:31

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

02:43

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

02:57

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

03:05

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

03:19

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/

03:33

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

03:45

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

03:57

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

04:08

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

04:18

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

04:32

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

04:46

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

05:02

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

05:12

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

05:24

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

05:35

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

05:46

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

05:58

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

06:08

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

06:21

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

06:35

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

06:52

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

07:02

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

07:19

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

07:33

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

07:49

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

08:01

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

08:13

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

08:30

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

08:44

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

09:00

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

09:13

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

09:28

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

09:41

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

09:55

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

10:14

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

10:29

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

10:51

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

11:03

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

11:19

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

11:30

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

11:44

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

11:56

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

12:06

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

12:20

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

12:31

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

12:43

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 Boot REST API CRUD operations PUT mapping DELETE mapping multipart image upload React e-commerce project Telusko Spring tutorial

Study this video

- [Flashcards from this video](https://sozai.app/tools/flashcard-maker/?from=transcript&id=90229)
- [Quiz on this video](https://sozai.app/tools/quiz-generator/?from=transcript&id=90229)
- [Crossword from this video](https://sozai.app/tools/crossword-maker/?from=transcript&id=90229)
- [Word search from this video](https://sozai.app/tools/word-search-maker/?from=transcript&id=90229)
- [Study guide from this video](https://sozai.app/tools/study-guide-maker/?from=transcript&id=90229)

Free, made by AI from this transcript. No signup.


---
This is the markdown twin of https://sozai.app/transcript/spring-project-update-delete/ — the same content, without the markup.
Published by SozAI (https://sozai.app). Reuse and quotation are allowed with attribution and a link back.
Machine-readable index: https://sozai.app/llms.txt · data API: https://sozai.app/api/