Angular upload Image and save it in spring-backend

Question

I am new to Angular/Spring and have to store (H2-Database) an image (jpeg/png) and I am not quite sure how I should manage to do this. I get my file in the template as:

<input #img type = "file"  accept="image/jpeg,image/png"  (change)="onFileSelected($event)">

My component-class looks like this:

private userDto: User = {
    id: 0,
    name: null,
    img: null
  }

  save(name:string){
      this.userDto.name = name;
      this.userService.saveUser(this.userDto).subscribe(
        newUser => this.createdUser = newUser)
  }

  onFileSelected(event){
    this.user.img = event.target.files[0];
  }

And my service(simplified):

saveUser(user: User): Observable<User>{
    return this.http.post<User>(this.userURI, user);
  }

I catch the post in Spring using @PostMapping/@RequestBody. My question now is: Which type do I have to send and use in Angular and Spring [java], that I can store the image in the backend and display the image I just stored when it is returned. (Or what I am doing wrong?) Sorry for the maybe dump question, but I never used neither Angular or Spring before. Thanks in Advance

In the frontend you usually have a blob, in the backend a byte[] for the image. — maio290
– maio290, Commented Mar 13, 2020 at 17:17

xpz · Accepted Answer · 2020-03-13 17:33:36Z

2

uploadFile( file: File , id : number ) : Observable<any>  
  {  
    let url = this.baseUrl + "uploadImage/" + id ;  

    const formdata: FormData = new FormData();  

    formdata.append('file', file);  

    return this.http.post(url , formdata);  
  }

the file argument of type File is retrieved in event.target.files.item(0)

check this for more details : https://www.javatpoint.com/angular-spring-file-upload-example

edited Mar 13, 2020 at 17:33

answered Mar 13, 2020 at 17:26

xpz

2762 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular upload Image and save it in spring-backend

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related