I am trying to send a post request through an angular UI that I built but I get the following error:
core.js:6456 ERROR
HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: "OK", url: "http://localhost:8080/upload", ok: false, …}
error: {timestamp: "2021-07-17T19:59:09.036+00:00", status: 400, error: "Bad Request", path: "/upload"}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for http://localhost:8080/upload: 400 OK"
name: "HttpErrorResponse"
ok: false
status: 400
statusText: "OK"
url: "http://localhost:8080/upload"
__proto__: HttpResponseBase
Below is my component.ts file:
onFileSelected(event: any){
console.log(event)
this.imageFile = event.target.files[0]
}
//send post request to MySQL
uploadImage(){
const fd = new FormData();
fd.append('image',this.imageFile)
this.httpClient.post("http://localhost:8080/upload",fd)
.subscribe(res=>{
console.log(res);
})
}
My HTML file:
<input type="file" class="file-input" (change) = "onFileSelected($event)"
#fileUpload>
<div class="file-upload">
<button mat-mini-fab color="primary" class="upload-btn"
(click)="fileUpload.click()" style="position:relative;top:25px;" >
<mat-icon>attach_file</mat-icon>
</button>
<button mat-button style="position:relaive;left:1px;" (click) = "uploadImage()">Upload file</button>
</div>
And my backend service:
@CrossOrigin(origins = "http://localhost:4200")
@PostMapping("/upload")
public ResponseEntity.BodyBuilder uploadImage(@RequestParam("imageFile") MultipartFile file) throws IOException {
System.out.println("Original Image Byte Size - " + file.getBytes().length);
model img = new model(file.getOriginalFilename(), file.getContentType(),
compressBytes(file.getBytes()));
userRepository.save(img);
return ResponseEntity.status(HttpStatus.OK);
}
Why am I receiving this error? It looks like everything is correct to me and the post request also goes through in Postman.
