How to store an image in the database using Angular 4 and Spring

Question

I'm using Angular 4 for the Front-end and Spring for the Back-end and I wanna store a user which contains an image in my database. As i know the type Blob exists in Angular 4 but it doesn't in Spring, and the type byte exists in Spring but it doesn't in Angular 4. How can I transfer my image from the Front-end to the Back-end using REST API.

This is my entity:

import java.sql.Blob;
@Entity
@Table(name = "USER_OAUTH", schema = "OAUTH")
public class UserOauth implements java.io.Serializable {
 private long idUser;
 private String username;
 private String firstName;
 private String lastName;
 private String adrEmail;
 private int isAdAccount;
 private Date lastConnection;
 private String password;
 private boolean enabled;
 private int attempts;
 private Blob photo;

@Lob
@Column(name = "PHOTO", length = 10000000)
public Blob getPhoto() {
    return photo;
}

This is my DTO :

public class UserDTO implements java.io.Serializable {

 private long idUser;
 private String username;
 private String firstName;
 private String lastName;
 private String adrEmail;
 private int isAdAccount;
 private Date lastConnection;
 private String password;
 private boolean enabled;
 private Blob photo;

This is my web service :(it works normally before adding the photo):

// Add a new user;
@RequestMapping(value = "/users", method = RequestMethod.POST)
public UserDTO addUser(@RequestBody final UserDTO user) throws Exception {
    return modelMapper.map(userService.saveUser(modelMapper.map(user, UserOauth.class)), UserDTO.class);
}

And finally my Typescript :

export class UserData {
  public  idUser: number;
  public  username: string;
  public  firstName: string;
  public  lastName: string;
  public  adrEmail: string;
  public  isAdAccount: boolean;
  public  lastConnection: Date;
  public  password: string;
  public  enabled: boolean;
  public  photo:Blob;
}

If there is any rectifications please let me know. Thank you in advance

Try convert to base64 https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding — Swoox, Jun 07 '18 at 10:06
@Swoox what about the image type in the database, it won't be a problem ? Because i wanna store it as BLOB — taha manar, Jun 07 '18 at 10:12
this might [help](http://javasampleapproach.com/frontend/angular/angular-4-uploadget-multipartfile-tofrom-spring-boot-server) — Vikas, Jun 07 '18 at 10:22

score 1 · Answer 1 · 2018-06-07T21:26:14.360

If you are really in the case when it makes a sense to store the images in the database, then you can you use LOB datatype:

// File content
@Lob
private Blob image;

On the Front-end use FormData to pass the file to the Back-end using REST API, see a sample here

P.S. You might probably want to store an image in the file system and keep its path in the database. Please see why.

score 0 · Answer 2 · answered Jun 07 '18 at 10:49

0

In TypeScript/ Angular you can declare your field like the following: img: File;

Your DTO in your RestController in Spring should use private final byte[] img; and finally your Entity also

@Lob
@Column(name = "IMG", length = 10000000)
private byte[] img;

answered Jun 07 '18 at 10:49

mrkernelpanic

4,268
4
28
52

what about the initialization in the DTO ? – taha manar Jun 07 '18 at 11:02
You need to map from your Entity to the DTO of course. – mrkernelpanic Jun 07 '18 at 11:04

score 0 · Answer 3 · answered Jun 09 '18 at 02:43

Assuming you are using Spring Data then Spring Content JPA is a lot easier than using @Lob directly and writing your own @Controller to handle multipart/form-data POSTs.

Add the following dependencies:

pom.xml

   <!-- Java API -->
   <dependency>
      <groupId>com.github.paulcwarren</groupId>
      <artifactId>spring-content-jpa-boot-starter</artifactId>
      <version>0.0.11</version>
   </dependency>
   <!-- REST API -->
   <dependency>
      <groupId>com.github.paulcwarren</groupId>
      <artifactId>spring-content-rest-boot-starter</artifactId>
      <version>0.0.11</version>
   </dependency>

Add the following attributes to your UserOauth entity so that content can be associated with it.

UserOAuth.java

@Entity
public class UserOAuth {

   ...existing fields...

   @ContentId
   private String contentId;

   @ContentLength
   private long contentLength = 0L;

   // if you have rest endpoints
   @MimeType
   private String mimeType;

   // no need for Blob

Create a ContentStore (the equivalent of a JpaRepository for BLOBs):

UsersOAuthContentStore.java

@StoreRestResource(path="usersPhoto")
public interface UsersPhotoContentStore extends ContentStore<UserOAuth, String> {
}

(I assume you have the pre-requisite beans for database connectivity).

When you run your application Spring Content will see the UsersPhotoContentStore interface and the spring-content-jpa dependency and inject a JPA implementation of this interface for you. It will also see the spring-content-rest dependency and add an @Controller implementation that forwards GET, PUT, POST and DELETE REST requests onto UsersPhotoContentStore as well. This saves you from having to write either. REST endpoints will be available at /usersPhotos so...

curl -X POST -F "image=@/home/user1/Desktop/photo.jpg" /usersPhotos/{userOAuthId}

will upload photo.jpg and associate it with your entity. And:

curl /usersPhotos/{userOAuthId} will fetch it again.

HTH

How to store an image in the database using Angular 4 and Spring

3 Answers3

Linked