Is it possible to send an array of FormData objects in an httpClient.post?

I have an Angular frontend app with a Java backend in which the user select a document and then saves it.

To do this, I've been sending a FormData object from the frontend to the backend with no issues.

Here's a snippet of what I currently have in the frontend that works to send the contents of a single file to the backend:

public postSaveDocument(entityType: DocumentEntityType, id: number, body: DocumentInputDto): Observable<Upload<UploadWithLockResultsDto>> {

const url = `${DocumentationService.baseUrl}/${getUrlSegment(entityType)}/${id}/documents`;

//Create a FormData object and set the values of the document
const formData = new FormData();
formData.append('documentId', this.documentId.toString());
formData.append('title', this.title);
formData.append('content', this.content, this.content.name);



return this.httpClient.post(url, formData,
{...DocumentationService.options, reportProgress: true, observe: 'events', responseType: 'json'})
.pipe(upload<UploadWithLockResultsDto>());



}


And here's what I do in the backend that works to save that file:

@PostMapping("/{documentEntityType}/{entityId}/documents")
public ResponseEntity<UploadWithLockResultsDto> saveDocument(
@PathVariable("documentEntityType") DocumentEntityType documentEntityType,
@PathVariable("entityId") Integer entityId,
DocumentInputDto documentInputDto,
) throws AuthException, IOException {

//Save the updates to the database
var uploadWithLockResultsDto = documentService.documentUpdate(documentInputDto, authentication.getName(), authentication.getPrincipal());
return handleUploadWithLockResults(uploadWithLockResultsDto);

}


And this works just fine to save a single document.

Now what I would like to do is allow the user to select more than one documents at a time, and save them in one fell swoop as they are sent to the back end.

So far no luck with this.

I've tried putting the data into an array of FormData objects in the front-end

public postSaveDocuments(entityType: DocumentEntityType, id: number, body: DocumentInputDto[]): Observable<Upload<UploadWithLockResultsDto>> {

const formDataArray: any[] = [];
body.forEach(documentInputDto => {

const formData = new FormData();
formData.append('documentId', this.documentId.toString());
formData.append('title', this.title);
formData.append('content', this.content, this.content.name);
formDataArray.push(formData);
});

return this.httpClient.post(url, formDataArray,
{...DocumentationService.options, reportProgress: true, observe: 'events', responseType: 'json'})
.pipe(upload<UploadWithLockResultsDto>());
}


And then I try to scoop it up in the backend as an array

@PostMapping("/{documentEntityType}/{entityId}/documents")
public ResponseEntity<UploadWithLockResultsDto> saveDocument(
@PathVariable("documentEntityType") DocumentEntityType documentEntityType,
@PathVariable("entityId") Integer entityId,
DocumentInputDto[] documentInputDtos,
) throws AuthException, IOException {

//Save the docs to the database
var uploadWithLockResultsDto = documentService.updateDocuments(documentInputDtos, authentication.getName(), authentication.getPrincipal());
return handleUploadWithLockResults(uploadWithLockResultsDto);

}


Not surprisingly this doesn't work. It never even gets to the backend. And I realize that an array of FormData objects probably isn't meant to be sent from the frontend to the backend.

Can anyone point me in the right direction though as how to modify the call such that more than one FormData objects are sent from the front to the back?

Thanks much.

Continue reading...