How can I receive multiple files with respective metadata with my spring controller in one request? - spring

Question

I am developing a java spring webApp with a typescript frontend and want to send several files with some additional informations which were added by the user in the frontend to the backend (with one request). So far I managed to implement the functionality such that I can send a single file and additional information in one request which then gets mapped into a respective object in the backend.
In the code below I would like to implement functionality such that all elements of the attachments array are sent in one go. Preferably the controller in the backend should directly map them to an array of the respective QuoteAttachment object.
My frontend DTO:
export type QuoteAttachment = {
file: File,
uploadedOn: Date,
};
My frontend post request:
async createAttachment(attachments: QuoteAttachment[], quoteReference: string) {
let formData: FormData = new FormData();
formData.append('file', attachments[0].file);
formData.append('uploadedOn', attachments[0].uploadedOn.toLocaleString());
formData.append('relatedQuote', quoteReference);
await this.http.performRequest('/attachment', {
method: HttpRequestMethod.Post,
data: formData,
headers: {
'Content-Type': 'multipart/form-data'
}
});
}
My backend DTO:
#Getter
#Setter
public class QuoteAttachment {
private MultipartFile file;
private String uploadedOn;
private String relatedQuote;
}
My backend controller:
#Controller
#RequiredArgsConstructor
#RequestMapping("/attachment")
public class AttachmentController {
private final AttachmentService attachmentService;
private final AttachmentValidationService attachmentValidationService;
#ResponseBody
#PostMapping
public void uploadFileWithInfos(#ModelAttribute final QuoteAttachment quoteAttachment) {
System.out.println("Test");
}
}
I really played around a lot and tried many different variations but didn't arrive at a good solution. I hope someone has a good idea for an implementation solving the problem.

Answer 1

I think there is a lot of solutions you can do for this:-
solution:
you can send the file as file in angular and as a Multipart in Spring boot, beside the QuoteAttachment DTO but as a String of JSON (NOT normal JSON). Example answer mentioned here in this URL then in java after receiving a String not a QuoteAttachment model you can map that string to a model with this simple code
ObjectMapper objectMapper = new ObjectMapper();
QuoteAttachment quoteAttachment = objectMapper.readValue(quoteAttachmentAsString, QuoteAttachment.class);
Note: ObjecMapper imported from com.fasterxml.jackson.databind library.
solution:
Also you can add all your QuoteAttachment DTO properties to formData in angular and receive them as #RequestParam in java. Example answer here
My preferred solution is number 1.