How to insert MultipartFile photo into DB as Base64 String in Java Spring boot and display it on the main screen back from the db

Question

How to insert MultipartFile photo into DB as Base64 String in Java Spring boot and display it on the main screen back from the db.

Answer 1

How to save image to mySQL database with thymeleaf and spring boot

To save an image to the mySQL database you need to do as following:

1 - On the bean class, you should declare 3 variables like that:

@Data
public class Product implements Serializable{

    private byte[] ProductImg;
    
    private MultipartFile UploadFile;
    
    private String Base64Img;

Explanation :

ProductImg

is in Byte which is the variable that will store our image to save it to the DB.

UploadFile

is the file that you will upload which is the image in our case.

Base64Img

is the encoded image after we convert it. Don't worry, I will explain that in details in a moment.

2- Let's go get the Image:

First you have to request the image from the HTML file with thymeleaf like that:

<input type="file" name="image" accept="image/png, image/jpeg"/>

or whatever you prefer.

3- Let's do our homework in the controller side:

import org.apache.tomcat.util.codec.binary.Base64;

@RequestMapping(value="/product-registration", method = RequestMethod.POST)
public String insertProductInfo(@ModelAttribute Product productInfo, @RequestParam(value="image",required=false) MultipartFile file,Model model) {
    productInfo.setUploadFile(file);
    try{
        byte[] image = Base64.encodeBase64(productInfo.getUploadFile().getBytes());
        String result = new String(image);
        System.out.println(result);
        productInfo.setProductImg(image);
    } catch(Exception e) {
        e.printStackTrace();
    }

    productService.insert(productInfo);
    return "redirect:/product-list";
}

So what does this code do is :

@ModelAttribute Product productInfo productInfo is the model attribute I'm collecting other data with, image is not included, you can include it though.

@RequestParam(value="image",required=false) MultipartFile file Here I'm getting the image I just uploaded and assigned it to "file" name.

the rest of the code is converting it to byte and then assign the byte values to the byte variable in Product class after converting it to string. make sure to print what you are inserting to DB, If the file is .png, It should look like that:

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

4- Insert the image to the db

I think this step is not a big deal, it's just like inserting any other data Calling the service class and assign the product class variable to it and then insert it to the DB.

How to pull out the photo from the DB and show it on the screen:

This part is a little bit tricky, so give me your attention

1- Controller side:

String encoded64 = new String(product.getProductImg()); product.setBase64Img(encoded64);

You will get the encoded image and then assign it to String Base64Img which we have declared in Product class, remember? Until now, you are fine. If you tried to print the encoded64 it will give you the same strange characters I wrote above.

So what's next?

2- thymeleaf side

the code for the image to display on your screen is as follows:

<img th:src="|data:image;base64,*{Base64Img}|" class="product-image">

*{Base64Img} is the same as ${product.Base64Img} It's inside a form, so ...