Accepting List<MultipartFile> files from Angular

Question

I'm experiencing issue with sending multiple files from angular front-end to spring-boot backend. I've tried everything from stack and from net but i couldn't find the answer. Here's my code:

Angular: .ts file:

  submit(){
    this.uploadedFiles = this.uploadedFiles.map(item => {
      let formData = new FormData();
      return formData.append('file',item,item.name);
    });
    this.service.postFile(this.uploadedFiles).subscribe(result => {
      console.log(result);
    })
  }

this.uploadedFiles is somehow undefined of type FormData ?

service file:

postFile(files: any): Observable<string>{
      return this.http.post('/id/file', files, {responseType:'text'});
  }

spring controller:

    @PostMapping(value = "/file")
private String newFile(@RequestBody List<MultipartFile> mf) {
    return "error";
}

inside of debugger i've got null for mf list.

The main issue is that for 1 file (when I'm using only MultipartFile) mine code is working.

I'm using PrimeNG's p-fileupload with custom upload event.

SiddAjmera SiddAjmera · Accepted Answer · 2019-01-07T13:36:09

I think the problem is with you sending an Array of FormData instances to postFile since you're instantiating formData again and again inside the map.

Give this a try to see if this works:

submit() {
  const formData = new FormData();
  this.uploadedFiles = this.uploadedFiles.map(item => formData.append('file', item, item.name));
  this.service.postFile(this.uploadedFiles).subscribe(result => console.log(result));
}

PS: I haven't tested this out but I feel it should work.

UPDATE:

I think you're logging the formData to the console like this:

console.log(files);

In your postFile method.

OR:

console.log(formData);

In your Component.

What you should be doing instead is

console.log(formData.get('file'));

Accepting List<MultipartFile> files from Angular

1 Answers

UPDATE: