Cannot load the image from database to thymleaf - spring

Question

This is my editprofile.html:
<form th:action="#{/updateProfile}" method="post" class="signin-form" th:object="${editprofile}" enctype="multipart/form-data">
<div class="title-main text-center mx-auto mb-md-5 mb-4" style="max-width:500px;">
<h5 class="footer-title-29">Personal Details</h5>
<div class="col-sm-6 profile_Pic">
<img id="thumbnail" th:src="*{'data:image/jpg;base64,'+profile_pic}" width="200" />
</div>
</div>
<br><br>
<div class="input-grids">
<label class="control-label" for="name">Name:</label>
<input type="text" th:field="*{name}" id="name" class="contact-input" />
<div class="row">
<div class="col-sm-6">
<label class="control-label" for="mobileNumber">Mobile Number:</label>
<input type="text" th:field="*{mobileNumber}" id="mobileNumber" class="contact-input" />
</div>
<div class="col-sm-6">
<label class="control-label" for="email">Email:</label>
<input type="text" th:field="*{email}" id="email"
class="contact-input" />
</div>
</div>
</div>
<div class="title-main text-center mx-auto mb-md-5 mb-4" style="max-width:500px;">
<h5 class="footer-title-29">Address Details</h5>
</div>
<div class="input-grids">
<label class="control-label" for="address1">Address Line 1:</label>
<input type="text" th:field="*{address1}" id="address1" class="contact-input" />
<label for="address2">Address Line 2:</label>
<input type="text" th:field="*{address2}" id="address2" class="contact-input" />
<label class="control-label" for="city">City:</label>
<input type="text" th:field="*{city}" id="city" class="contact-input" />
<div class="row">
<div class="col-sm-6">
<label class="control-label" for="state">State:</label>
<input type="text" th:field="*{state}" id="state"
class="contact-input" />
</div>
<div class="col-sm-6">
<label class="control-label" for="zipCode">Zip Code:</label>
<input type="text" th:field="*{zipCode}" id="zipCode"
class="contact-input" />
</div>
<div class="col-sm-6">
<label class="control-label" for="fileImage">Upload image</label>
<input type="file" name="fileImage" accept="image/*" id="fileImage" />
</div>
</div>
</div>
<div class="col-md-8 login-center text-start">
<button class="btn btn-style btn-style-3 text-left" >Update</button>
<a th:href="#{/dashboard}" class="new-user text-right">
<button class="btn btn-style btn-style-3 text-left" th:formaction="#{/displayProfile}">BACK</button></a>
</div>
</form>
I did a compress and decompress when adding and retrieving the data from db
Code: ImageUtil.java
public static byte[] compressImage(byte[] data) {
Deflater deflater = new Deflater();
deflater.setLevel(Deflater.BEST_COMPRESSION);
deflater.setInput(data);
deflater.finish();
ByteArrayOutputStream outputStream = new ByteArrayOutputStream(data.length);
byte[] tmp = new byte[1024];
while (!deflater.finished()) {
int size = deflater.deflate(tmp);
outputStream.write(tmp, 0, size);
}
try {
outputStream.close();
} catch (Exception e) {
}
return outputStream.toByteArray();
}
public static byte[] decompressImage(byte[] data) {
Inflater inflater = new Inflater();
inflater.setInput(data);
ByteArrayOutputStream outputStream = new ByteArrayOutputStream(data.length);
byte[] tmp = new byte[1024];
try {
while (!inflater.finished()) {
int count = inflater.inflate(tmp);
outputStream.write(tmp, 0, count);
}
outputStream.close();
} catch (Exception exception) {
}
return outputStream.toByteArray();
}
I upload the image like:
person.getAddress().setProfile_pic(ImageUtil.compressImage(file.getBytes()));
personRepository.save(person);
And the image is saved to db successfully
The problem is image cannot be displayed.I did this when retrieving the data from db:
byte[] decomImage = ImageUtil.decompressImage(person.getAddress().getProfile_pic());
byte[] encodeBase64 = Base64.getEncoder().encode(decomImage);
String base64Encoded = new String(encodeBase64, "UTF-8");
pojoprofile.setEncoded_image(base64Encoded);
I cannot retrieve the image and display it. I tried decompress the image and converted it into Base64 to display it in the thymleaf.
This is my controller class to upload image to database:
#RequestMapping(value = "/EditProfile")
public ModelAndView EditProfile(Model model, HttpSession httpSession){
PersonPojo person=(PersonPojo) httpSession.getAttribute("loggedInPerson");
Profile pojoprofile1=new Profile();
pojoprofile1.setName(person.getName());
pojoprofile1.setEmail(person.getEmail());
pojoprofile1.setMobileNumber(person.getMobileNumber());
if(person.getAddress()!=null&&person.getAddress().getAddressId()>0){
pojoprofile1.setAddress1(person.getAddress().getAddress1());
pojoprofile1.setAddress2(person.getAddress().getAddress2());
pojoprofile1.setCity(person.getAddress().getCity());
pojoprofile1.setState(person.getAddress().getState());
pojoprofile1.setZipCode(person.getAddress().getZip_code());
pojoprofile1.setProfile_pic(Base64.getEncoder().encode(person.getAddress().getProfile_pic()));
// pojoprofile1.setProfile_pic(person.getAddress().getProfile_pic());
}
ModelAndView editprofile=new ModelAndView("EditProfile.html");
editprofile.addObject("editprofile",pojoprofile1);
return editprofile;
}
#RequestMapping(value = "/updateProfile")
public String updateProfile(#RequestParam("fileImage") MultipartFile file, #Valid #ModelAttribute("editprofile") Profile profile, Errors errors,
HttpSession httpSession) throws IOException {
if(errors.hasErrors()){
return "EditProfile.html";
}
PersonPojo person=(PersonPojo) httpSession.getAttribute("loggedInPerson");
person.setName(profile.getName());
person.setEmail(profile.getEmail());
person.setMobileNumber(profile.getMobileNumber());
if(person.getAddress() == null || !(person.getAddress().getAddressId()>0)){
person.setAddress(new AddressPoJO());
}
person.getAddress().setAddress1(profile.getAddress1());
person.getAddress().setAddress2(profile.getAddress2());
person.getAddress().setCity(profile.getCity());
person.getAddress().setState(profile.getState());
person.getAddress().setZip_code(profile.getZipCode());
person.getAddress().setProfile_pic(ImageUtil.compressImage(file.getBytes()));
personRepository.save(person);
httpSession.setAttribute("loggedInPerson", person);
return "redirect:/dashboard";
}
Controller to display the content in Profile page:
#RequestMapping("/displayProfile")
public ModelAndView Myprofile(HttpSession httpSession) throws UnsupportedEncodingException {
Profile pojoprofile=new Profile();
PersonPojo person=(PersonPojo) httpSession.getAttribute("loggedInPerson");
pojoprofile.setName(person.getName());
pojoprofile.setEmail(person.getEmail());
pojoprofile.setMobileNumber(person.getMobileNumber());
if(person.getAddress()!=null&&person.getAddress().getAddressId()>0){
log.info("Inside the if"+new MyProfile().getClass().toString());
pojoprofile.setAddress1(person.getAddress().getAddress1());
pojoprofile.setAddress2(person.getAddress().getAddress2());
pojoprofile.setCity(person.getAddress().getCity());
pojoprofile.setState(person.getAddress().getState());
pojoprofile.setZipCode(person.getAddress().getZip_code());
byte[] encodeBase64 = Base64.getEncoder().encode(ImageUtil.decompressImage(person.getAddress().getProfile_pic()));
pojoprofile.setProfile_pic(encodeBase64);
}else {
pojoprofile.setAddress1(" Not available ");
pojoprofile.setAddress2(" Not Available");
pojoprofile.setZipCode(" Not Available");
pojoprofile.setState(" Not Available");
pojoprofile.setCity(" Not Available");
}
return new ModelAndView("profile.html").addObject("profile",pojoprofile);
}

Answer 1

You should return a String representation of an image, rather than a byte array. So change your code to
String encodeBase64 = Base64.getEncoder().encodeToString(person.getAddress().getProfilePic());
pojoprofile.setProfilePic(encodeBase64);
This means that Profile.profilePic is also a String. ( person.getAddress().getProfilePic()should return a valid byte array)
EDIT:
If you just want to make sure that this works without changing much of your code, I suggest adding a String field to Profile.java and setting that field with a hardcoded base64 image in your controller.
private String testImg; //in Profile.java
//in your controller
String picbase64 = "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";
pojoprofile.setTestImg(picbase64);
You will have adjust profile.html as well to include this new field. (anyway I tested this and it's working as expected)
The fastest way to test your current code would be to call setProfilePic with a base64 hardcoded image
pojoprofile.setProfilePic( "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" );
The Profile class should be changed as well, since we're now using a String instead of a byte[]
class Profile {
//base64 encoded image
private String profilePic;//private byte[] profilePic;
....
}