Speaker A
now it's time to move to the next step now this step is bit crucial not exactly crucial but then uh difficult to understand uh because when I was doing this before the video uh there are lot of moving parts and there a lot of uh
Telusko's Spring tutorial #25 shows how to extend a product-catalog app so products can be added with an image, storing the image as a LOB byte array in the database and serving it via a per-product i
Key Takeaways
- Binary images can be stored in a relational database by mapping byte arrays with @Lob
- Images are commonly better stored in cloud storage with only URLs kept in the database, but database storage keeps the tutorial simple
- Client-side and server-side checks on content type are important when accepting uploaded files
- The image-serving endpoint must follow the URL pattern the front end expects
What the video covers
- Introduces the next step: adding product images to a Spring-based e-commerce app with a React front end
- Explains that the Product entity lacks any image field, so new fields (image name, type, and byte data) must be added
- Describes the front end's separate handling of product data and image upload, using two state setters for each
- Proposes a URL convention where each product's image is fetched from /product/{id}/image
- Discusses validating file type on the client side to avoid malicious uploads, favouring formats like JPG
- Stores image bytes in the database using @Lob (large object) mapping, noting that cloud storage is a better production alternative
- Implements a POST /product endpoint that passes the product from controller to service to repository
- Adds a controller method that returns image bytes for the image endpoint, with an exception signature for retrieval errors
- Tests adding a product with an image through the UI, which reports success but the image does not yet display on the home page
- Notes the image-display bug will be resolved in the next video
Chapters
- 00:00Introduction to adding product images
- 01:01Reviewing the new UI and requirements
- 02:06Examining the front-end code and API calls
- 04:08Adding image fields to the Product model
- 07:36Creating the add-product POST endpoint
- 12:54Implementing the image retrieval endpoint
- 14:56Testing product creation with an image
- 17:16Wrap-up and next steps
Full Transcript — Download SRT & Markdown
Speaker A
things we have to take care of because we are not just doing adding of the new product because that's what we have discussed right uh so we have talked about getting all the products and we are getting those products on the page
Speaker A
so just to show you the browser this is what we had so if I see here we got the products and if you click on this uh you will also get the items that is working right uh but now what I want to do is I
Speaker A
want to basically have images as well so with each product I want to get their image because that will make it more interesting right so because when you go to any website or any e-commerce website with the product you also get the image
Speaker A
and of course when you click on this thing on the left hand side also I want an image next thing I want is the add product of course this is not there so we have to change the UI as well but I
Speaker A
want is this option of adding a product and when you add the product I also want to add the image now the tricky part here is if you see uh not this if you see our code this is the UI if you see
Speaker A
our code in the product we don't have any variable which handles the image we have ID name uh description uh brand price category uh release date availability and quantity nowhere we are talking about image okay so that's something we have to add so now this
Speaker A
time we'll go for the new uh UI okay so we have updated the UI for the for this particular section and we are going to use the new UI and the new for the link for the new UI you will find in the
Speaker A
description okay but in the new UI you don't need to handle this because it has been handled in the UI itself so we don't have to convert that by uh by doing it in Java so the in UI also we
Speaker A
have done this so we can remove this so you got the right we can do that from the back end as well now I'm removing it so we'll handle that in the UI now what are the variables we need and what is a
Speaker A
new UI so let's see the new UI first uh this is the front end tool for the previous section uh I will open the new UI so I will say open so this is where I have my new UI which is the front end 3
Speaker A
I will open this I should have stopped the earlier one or it was stopped okay I've not stopped it maybe the same put now we cannot use let's see let's see so I will close this and now I will open
Speaker A
the terminal in the terminal basically I'm going to uh do the same thing npm install same steps which you have done before uh since new projects I will just do that once again run Dev and okay so on the same port number so it was
Speaker A
stopped automatically I'm not sure so if I click on this it will open the new why it is opening on the other screen I will open that here okay this is a new one uh this is the old one or which is a new
Speaker A
one okay so it got refreshed automatically anyway this is a new UI and what is missing here is you can see that we got the product but then this thing here it was a image and we are not
Speaker A
able to show the images because we don't have the image from the back end next when I click on this on the left hand side as well this is where I want the image so I will I want to do that as
Speaker A
well and how do we do it and also we got the add product page now this is where you will enter your product name brand description price uh which category it belongs to the quantity the release date of the product and the image okay now
Speaker A
this this is basically tricky part image part other other things are easy now if you're following from a long time from the start you know how do we create a new product or how do we create a new
Speaker A
object and send it and save that in database we know that but the tricky part here is to handle the image so we'll do that we'll do that step by step so let's get back to our IDE uh in fact
Speaker A
we should talk some we should see the code in UI as well uh I'm looking at the Cod UI with you so just bear with me where are the changes would be nothing in app uh category use State okay we got
Speaker A
product with ID this was there before okay we also got cart uh option so if I click on cart we can also see the cart but we'll do the cart part later not in this video and we'll do add add product
Speaker A
this is what I want to do and how the ad product page is built is is with the help of this so in this we are changing the product and image separately so we got two different uh methods to do that
Speaker A
we got set product and set image so basically we are fetching them individually so we are fetching the product here we sending the product this is the post and for image image will be loaded right so that will call that
Speaker A
function is calling handle image change handle image change is calling a set image okay makes sense so this this is how basically you are sending the request for the add product and on the homepage also we have a change because
Speaker A
not just the product data but we also want to show the image and for the image we are sending the request separately if you can see we are sending the request for each product so we are using a map
Speaker A
for ration and for each product with a different ID we are sending a request for the image okay so since in the UI we are using this format let's say use the same format in the back end so the
Speaker A
request would be product/ the product ID If the product ID is one it will be product SL1 SL image product SL2 SL image that's how it will go so it will fetch the image for a particular product uh since it's not in database it is
Speaker A
giving you that blank icon but that's what it is there in the UI I don't think there's much change apart from that there's also cart button we'll be using we'll be doing cart later in product individual product also we are going to
Speaker A
spe Supply the image so same URL you can see product/ one/ image or product/ 2/ image so same URL we're going to use so in the back end basically we have to build two URLs one one for adding a
Speaker A
product and one for getting that image okay so let's do step by step let's go back to our code and the first thing you're going to do is change this product so for the image I need three things because when you send data on a
Speaker A
client side you have to also specify the content type of the image uh not all formats are supported maybe someone is sending the malicious executor file or some Javascript file so make sure that you go for images like jpg so that's
Speaker A
something you can check on in the front end side so you have to specify what type of content you're are working with so this image actually can be a file so file name file type and uh file data so
Speaker A
we can also say image data that's fine so I will say private string image name uh then private string image type and uh the data so I will say private now what type of how do you store your data so
Speaker A
basically there are multiple ways of handling with images you can store the image on some cloud storage okay and you can get the link of it so you can store the URL of that cloud storage in your database that's one way uh we went for
Speaker A
the simple way because otherwise we have to sign up the AWS account store the image there so multiple steps right just to keep it simple I'm storing the image in database again not a great idea but it works so I'll be using a bite are
Speaker A
because we are going to store that in a bite format and I will say image data now whenever you work with this type of data like bite array which you want to store in database we have to store that
Speaker A
as a large object so we have to use for from persistance which is lob which is large object okay so this is what we have done and now if you run this you will get us different database different
Speaker A
table and since I'm working with images I don't want some pre-loaded data so I will okay let's have the same preload data and let's see what happens so let's reload this to see what is a database change we are getting so this is loading
Speaker A
okay Tomcat started uh I will be going to my console S2 console okay refresh default data I will say product and star so you can see we got this data but we got three more columns we got image data
Speaker A
image name and image type and all are null you know why is because we have not specified this thing in the data SQL but I don't want it actually because image is not there uh I have to manually
Speaker A
update each image we can do that in the update feature but then we are not working on update now so I will just go with the blank data and I will type each object TDS ask but we have to do it
Speaker A
right so what I will do is I will just delete this or maybe I will just change the name of it I hope by changing name it will not be loaded so data SQL 1 uh next I want
Speaker A
to so we have the changes in the product and we have seen that it is reflecting in database as well it's time to accept the new uh product so I will create an object I will create a method here for
Speaker A
the new product so I will say public we return the response entity itself with some data and I I may return any type of data so I will say put in question mark because I'm not sure we might return the data or we might return
Speaker A
exception so we'll have it both uh I not exception but only the status if something went wrong uh next I will say add product now the question is what kind of mapping we we are going to do so
Speaker A
of course we have to do the post mapping so post mapping and the URL is simply slash product nothing else just a product because we are sending sending data in the body right so this is where you're going to send data now if it is a
Speaker A
normal product with without the image it's very simple you can use request body and we can simply say product product our job is done right it will accept the product object but the tricky part here is we are sending the image as
Speaker A
well which is are a different format so instead of using a product a request body we'll be using the request part now request part and request body is bit different request body except the whole object or the whole Json as object
Speaker A
request part will accept in a part in a part as the name suggest right in two different parts or multiple parts so request part for product you will accept in product but for the image will the next line so I will say
Speaker A
request part and we'll accept the image now image itself is a file and we'll accept that as a multiart file yeah multiart file and we'll store that in the name called image file you can also say image that works but image file is
Speaker A
here now once you got your data we have to send this data to the next layer who's the next layer we service layer right how we going to send this so I can simply say hey Service uh add the
Speaker A
product whatever I'm accepting and I'm going to pass you two things I'm going to pass you the product and I'm going to pass you the image file so you just take care of storing that in database but I
Speaker A
also want to check if it is actually getting stored so what I will do is I want it to return me a product say product okay and what if something goes wrong CU so we also have a product
Speaker A
name here let's say product one and okay how we are going to get the error so let's say if something goes wrong with the ad product it will throw the exception right so what I can do is I
Speaker A
can set that in a try catch so I will try to add the product if it is not working if I get the exception e so in this case I will simply return the uh some other response okay but if some if
Speaker A
everything goes wrong I return new response entity in which I'm going to save the product which is the new which is the save project in in database and also the status code the status I want to save is HTTP status do created but
Speaker A
what if something goes wrong in that case I'm going to return the response object new response entity but we'll send only the status not the object itself or maybe I can send the message so e do get message so it will send the other
Speaker A
message again these things will be handled from the client side so what type of message you're sending client can decide they want to show it or they want to handle their own way but I'm sending the message with message I also
Speaker A
want to St send the status I will say status dot uh for error it should be internal server error something went wrong but also we are sending the message so at least the client will know what is going wrong okay so we got add
Speaker A
product but it's not there in the service so let's create this I will just click here and say hey create this method called add product and now the next step goes here how do we do this how do we add a product it's actually
Speaker A
quite simple right we can add a product by saying heyo save the product it's so simple right get the uh product from the uh from the controller control send it to service and we getting in the service from service send it to repo job is done
Speaker A
right but actually no because we don't just have to send the product we have have to also send the image right now this is tricky to send the image basically we have to get the image and we have to convert that image into bytes
Speaker A
remember this database we are sh in a bytes format okay so we have to get the bytes format and not just that we have to also get the name of the image and the type of the image so in the product
Speaker A
we'll say uh set the image name and how will you get the image name so I will say image file dot get name in fact not name it will not return we have some other method yeah it's original file
Speaker A
name product Dot Set uh image type so let say image file do get content type and then we have to set the image as well so image data and this will be your image file dot we have to convert it into bytes and we have a
Speaker A
method called get bites okay it might throw an exception yeah so we have to add the signature it might throw an exception so I'm throwing I exception and once you have all the image data in the product I can simply say return uh
Speaker A
so whatever you save will be returning it here and it it should be stored in database I hope this will work so what we have done is we got the product we got the image uh we got image details
Speaker A
and said that in the product data or product object and then we are saving it so this should be stored in the database that's the first step let's try let's see what happens I will relaunch it and if something goes wrong we'll solve it
Speaker A
right we know how to solve itas now so Tomcat got restarted I will go back to my browser I have to move multiple pages and here I will click on home okay it says nothing is visible so I will click
Speaker A
on ADD product let's add some product I will say Sam mobile the brand is Samsung some description price $99 uh it's a type of Mobile stock is let's say 4 date release date is let's say 1st June image I got in my
Speaker A
downloads so that's the image here available yes click on submit okay it says product added successfully but when I click on okay and if I click on home image is still not there okay so we'll solve this but I want to see if the
Speaker A
image actually has been sent on the in the database for that I will go to H2 and if I click on product okay I think I have to reload yeah connect product run okay we got the product and if you can see uh we got
Speaker A
okay something went wrong with the description we'll check that later uh but we got we got the image we got the image name we got the image type we got the name of the phone price quantity okay so these two things we have to sync
Speaker A
up I think there's something wrong with the communication between the client and the server but that something will resolve it it it is might be some name issue but the problem but the main thing is we are able to send the image but why
Speaker A
the image uh product details are not coming up what I will do is I just go back here and just I just want to print whatever we are receiving in product just to see uh what is missing from the
Speaker A
client side add product also Sam M brand Samsung some description $88 so Phone Stock six release date one image available submit product added but now I want to see what is coming on the console on the console it's sending ID Z makes sense S one okay
Speaker A
so description is not getting sent from the client itself so some there's some issue with the UI we'll get it resolved and we'll replace a link if I ConEd that but the most important thing is we are sending the image separately and that's
Speaker A
why you got null here but we'll we'll solve that nothing not a big issue I think these are the names we have changed right that's why there was a issue anyway uh okay I also we are not even loading
Speaker A
the default data so that is working but what about the image why it is not loading the image it's because if you see the UI the image is getting fetched as a separate URL and this is something we have to build okay so uh we need to
Speaker A
work on this not just on the product page but also on the homepage it is requesting for that URL and now we have to search for that URL where it is doing that yeah it's here so we just have to build this thing
Speaker A
and it will work but how uh let's see that in the next video so in this video we just have seen how do we add a new product but with the help of image as well uh with the help of multi multiart
Speaker A
file and we are getting the details about the image and storing that in the product and then we saving the product in database so cool that's how this thing works see you in the next video where we we're going to work on this
Speaker A
bye-bye
Topics:Spring Bootimage uploadREST API@Lobbyte arrayproduct catalogReactfile uploade-commerce tutorialTelusko
