I am trying to submit a form consists of text fields and a file uploader in react. The file uploader is integrated with react-filepond as follows.
<FilePond
ref={ref => (this.pond = ref)}
files={this.state.files}
allowMultiple={true}
maxFiles={5}
server={() => this.saveComplaint()}
oninit={() => this.handleInit()}
onupdatefiles={fileItems => {
this.setState({files: fileItems.map(fileItem => fileItem.file)});
console.log("file aaa", this.state.files); }} />
What I need to do is, submitting all the data filled in the input fields to the same REST api endpoint(file is optional) which is currently using for persisting other fields. Currently, it is facilitated with the form submit event.
API endpoint:
@PostMapping("/{orderId}/items/{itemId}")
public ResponseEntity<QualityComplaintDto> createInquiry(@RequestBody QualityComplaintDto complaintDto,
@PathVariable long itemId,
@PathVariable long orderId,
@RequestParam("files") @Nullable List<MultipartFile> multipartFiles) {
LOGGER.info("Inquiry saving started for id = [{}]", complaintDto.getId());
QualityComplaintEntity complaintEntity =null;
ArrayList<String> fileNames = null;
complaintEntity = complaintService.createInquiry(orderId, itemId, complaintDto, multipartFiles);
LOGGER.info("Inquiry saving completed for id = [{}]", complaintDto.getId());
return ResponseEntity.ok(QualityComplaintDto.toDto(complaintEntity));
}
So I need to function this Filepond file uploading in the same API endpoint that I am using to persist the data in Entity. Is that server={} attribute should I use to facilitate this? I need to upload these files in the same form submitting function.
Any guide is appreciated.
