Sending files from angular 6 application to spring boot web api "Required request part 'file' is not present" - rest

Question

I'm trying to send an file from angular 6 front-end to spring boot web API.
but it gives me following error
Bad Request","message":"Required request part 'file' is not present
here is my html code to upload file
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" name="file" (change)="fileChange($event)" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
</div>
<button (click)="uploadFile()" type="button" class="btn btn-primary">Upload</button>
here is my ts code
formData:FormData = new FormData();
readytoupload:boolean=false;
fileChange(event) {
let fileList: FileList = event.target.files;
if(fileList.length > 0) {
let file: File = fileList[0];
this.formData.append('file', file);
this.readytoupload =true;
}
}
uploadFile(){
if(this.readytoupload){
this.featureservice.uploadFIle(this.formData).subscribe(data => {
const a = data.json();
this.goToProcess(a.process_id)
});
}
}
Here is the angular serivice
uploadFIle(formData:FormData){
let headers = new Headers();
headers.append('Accept', 'application/json');
headers.append("Content-Type", 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW');
return this.http.post(this.url+'upload',formData,{headers: headers})
};
this is the back-end controller
#CrossOrigin(origins = "*")
#PostMapping(value = "api/upload")
public String uploadReviews(#RequestParam("file") MultipartFile file, RedirectAttributes redirectAttributes) {
if (file.isEmpty()) {
return null;
}
try {
byte[] bytes = file.getBytes();
Path path = Paths.get(uploadFolder + file.getOriginalFilename());
uploadFile = path.toString();
Files.write(path, bytes);
sessionID = "6";
} catch (IOException e) {
e.printStackTrace();
return null;
return sessionID;
}
above API service is perfectly working with Postman requests. But not working with angular requests.
Can any one please help me on this?

Answer 1

Instead of this :-
return this.http.post(this.url+'upload',formData,{headers: headers})
Use this :-
return this.http.post(this.url+'upload',{"file" : formData},{headers: headers})
Hope this helps

Answer 2

this worked for me
downloadPdf(file: File): Observable<HttpEvent<any>>{
const formData: FormData = new FormData();
formData.append('file', file);
const req = new HttpRequest('POST', `${this.url}/upload`, formData, {
reportProgress: true,
responseType: 'arraybuffer' as 'json'
});
return this.http.request(req);
}