I have used the capacitor plugin to let user capture images and then we can store it in our server(spring).
async takePicture() {
const image = await Plugins.Camera.getPhoto({
quality: 100,
allowEditing: false,
resultType: CameraResultType.DataUrl,
source: CameraSource.Prompt,
});
this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
console.log(this.photo)
console.log(image)
}
Now , I want to store image with some other data like name, etc.
servie.ts
httpOptions2 = {
headers: new HttpHeaders({ 'Content-Type': 'multipart/form-data' })
};
addReport (user): Observable<any> {
return this.http.post<any>(this.url , user,this.httpOptions2 )
}
page.ts
let report = {
address : this.address.value, // other data
image : this.photo,
}
console.log(report)
this.reportService.addReport(report).subscribe(data =>{
console.log(data)
})
Input type at the server for the image is the file
I have set ‘Content-Type’: ‘multipart/form-data’.
But at the server-side image is not getting stored?
What am I doing wrong?
Getting following error on server
Failed to parse multipart servlet request; nested exception is java.io.IOException: org.apache.tomcat.util.http.fileupload.FileUploadException: the request was rejected because no multipart boundary was found
Thank you in advance