How to send multiple files from Angular as FormData to Spring Boot as MultipartFile[]?

Question

My code below is for a single file upload, but I am trying to send multiple files from Angular to Spring Boot all at once. Sending multiple formdata to an ArrayList in Spring Boot results in null, and I can't @RequestParam a single formdata in Spring Boot, since the amount of files sent from Angular is dynamic (defined by the user). Could anyone please help?

Spring Boot controller:

@PostMapping("/jobAdApplication")
public void jobAdApplication (@RequestParam("files") MultipartFile[] files, 
   @RequestParam("candidateName") String candidateName) {
       (...)
}

Angular component:

selectedFiles!: FileList;
file!: file;

(...)

if (this.selectedFiles) {
   let file: File | null = null;
   const formData: FormData = new FormData();

   for (let i = 0; i < this.selectedFiles.length; i++) {
      file = this.selectedFiles.item(i);
      if (file) {
         formData.append(`file${i}`, file);
      }
   }

   formData.append('candidateName', this.applyFormGroup.get('name')?.value);

   this.fileService.uploadFile(formData).subscribe({
      next: response => {
         alert('Files sent successfully')
         this.applyFormGroup.reset();
      },
      error: err => {
         alert(`Error: ${err.message}`);
      }
   });

   this.selectedFiles = undefined;
}

Angular service:

uploadFile(jobAdApplication: FormData): Observable<any> {
   return this._http.post<any>(`${this.jobCandidateUrl}/jobAdApplication`, jobAdApplication);
}

Joosep Parts · Accepted Answer · 2022-05-12 02:25:20Z

2

Doesn't selectedFiles!: FileList have to be an iterable? Like an array? Then the for (of) loop should be also changed to access file at index [i]. If it's an object, like a map you could use for (in) loop and get items using Object.entries.

Could you console log jobAdApplication before you POST it? I'm just curious what the data structure looks like.

If that is all okay then go over how you append the files.

Controller is expecting array of MultipartFile on param files.

@RequestParam("files") MultipartFile[] files

But here you append them to file with changing index.

 formData.append(`file${i}`, file);

Instead keep them named files so controller can access the right thing.

 formData.append('files', file);

answered May 12, 2022 at 2:25

Joosep Parts

6,3452 gold badges13 silver badges38 bronze badges

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

1 Comment

Murilo de Melo Reis Over a year ago

Hi Joosep, I changed the selectedFiles!: any[], which seems to work just fine, and formData.append('files', file) works perfectly right. Sound obvious, but not logically to me in terms of two instances having the same name/identifier ('files'). It seemed as one would replace the other. But it seems obvious in terms of backend property matching and it works. Thank you very much!

Collectives™ on Stack Overflow

How to send multiple files from Angular as FormData to Spring Boot as MultipartFile[]?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related