Angular Spring Boot (File+FormData) Upload

Question

I want to save to file+form data with angular. form image I use spring boot as a service. The code below works when I save the file alone.But I couldn't find how to save (file+title+description).How can I save all at the same time?

*HTML

<form [formGroup]="informationForm" enctype="multipart/form-data">
            <div class="row">

                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="inputLastName" class="label">Title</label>
                        <input type="text" nbInput fullWidth fieldSize="small" formControlName="title">
                    </div>
                </div>
                
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="inputLastName" class="label">Description</label>
                        <input type="text" nbInput fullWidth fieldSize="small" formControlName="description">
                    </div>
                </div>
            
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="inputLastName" class="label">Attachment</label>
                        <input type="file" nbInput fullWidth fieldSize="small" (change)="onFileSelected($event)"
                            formControlName="file">
                    </div>
                </div>

                <div class="col-sm-6">
                    <div class="form-group">
                        <button type="submit" nbButton size="small" (click)="onSubmit()"
                            status="primary">Save</button>
                    </div>
                </div>
            </div>
    </form>

*Component.ts

onFileSelected(event) {
        if (event.target.files.length > 0) {
        const file = event.target.files[0];
        this.selectedFile = file;
        }
    }

  onSubmit() {

    const formData: FormData = new FormData();
    formData.append('file', this.selectedFile);

    this.service.save(formData).subscribe(res => {
      if (res === 'OK') {
        this.alertify.makeToastErrror();
      }
      else {
        this.alertify.makeToastErrror();
      }
    });
   
  }

*Service.ts

save(formData: FormData): Observable<any> {
    return this.apiService.post(apiHost + '/saveFile', formData);
  }

Spring Boot

 @PostMapping(value = "/saveFile", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public ResponseEntity<HttpStatus> save(@RequestParam("file") MultipartFile file) throws IOException {
    .........

}

zdnmn · Accepted Answer · 2021-06-16 12:25:34Z

user: User = new User();

onSubmit() {
    this.user.name = this.egitimBilgileriForm.get("user").value;
    this.user.title = this.egitimBilgileriForm.get("title").value;

    const formData: FormData = new FormData();
    formData.append('file1', this.selectedFile1);
    formData.append('file2', this.selectedFile2);
    formData.append('user', new Blob([JSON
      .stringify(this.user)], {
      type: 'application/json'
    }));
    
    this.save(formData);
}

 saveManuel(formData: FormData) {
    this.service.createUser(formData).subscribe(res => {
      .
      .
      .
    });
  }
  
  createUser(formData: FormData): Observable<any> {
    return this.apiService.post(apiHost + '/saveUser', formData).pipe(map((data: any) => {
      return data;
    }));
  }


export class User{

user:string,
title:string,
.
.
.
}




 @PostMapping(value = "/saveUser", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public ResponseEntity<HttpStatus> createUser(@RequestParam(name = "file1") @Size(min = 1) MultipartFile file1,
            @RequestParam(name = "file2") @Size(min = 1) MultipartFile file2, @RequestPart(name = "user") String user) throws JsonProcessingException, IOException {

        

        User user = new ObjectMapper().readValue(user, User.class);
       

        List<MultipartFile> multipartFileList = new ArrayList<>();
        multipartFileList.add(file1);
        multipartFileList.add(file2);

        List<File> fileList = new ArrayList<>();

        for (MultipartFile multipartFile : multipartFileList) {
            fileList.add(new FileUploader(cvService).uploadCvFile(user, multipartFile));
        }

        cvService.saveUser(user, fileList);

        return ResponseEntity.ok(HttpStatus.OK);

    }

bluray · Accepted Answer · 2021-03-12 06:14:16Z

0

Do you try it like that?

const formData: FormData = new FormData();
formData.append('file', this.selectedFile);
formData.append('title', this.title);
formData.append('description', this.description);

answered Mar 12, 2021 at 6:14

bluray

1,9736 gold badges40 silver badges73 bronze badges

Collectives™ on Stack Overflow

Angular Spring Boot (File+FormData) Upload

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related