Required "file" request part no - Angular2 Post request
I am trying to load my file upload functionality using Angular2 and SpringBoot. I can confirm that my Java code for uploading files is working fine as I tested it successfully with Postman.
However, when it comes to submitting a file from the Angular2 front end, I get an HTTP 400 response saying Required request part 'file' is not present
.
This is how I send POST request from Angular2.
savePhoto(photoToSave: File) {
let formData: FormData = new FormData();
formData.append('file', photoToSave);
// this will be used to add headers to the requests conditionally later using Custom Request Options
this._globals.setRequestFrom("save-photo");
let savedPath = this._http
.post(this._endpointUrl + "save-photo", formData)
.map(
res => {
return res.json();
}
)
.catch(handleError);
return savedPath;
}
Note that I wrote a class CustomRequestOptions
that extends BaseRequestOptions
to add an Authorization header and Content Type header. Content type content will be added conditionally.
Below is the code for this.
@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
constructor(private _globals: Globals) {
super();
this.headers.set('X-Requested-By', 'Angular 2');
this.headers.append('virglk', "vigamage");
}
merge(options?: RequestOptionsArgs): RequestOptions {
var newOptions = super.merge(options);
let hdr = this._globals.getAuthorization();
newOptions.headers.set("Authorization", hdr);
if(this._globals.getRequestFrom() != "save-photo"){
newOptions.headers.set('Content-Type', 'application/json');
}else{
//request coming from save photo
console.log("request coming from save photo");
}
return newOptions;
}
}
This conditional header addition works fine. To do this, you need to add a header 'Content-Type', 'application/json'
for each request, the file upload method in your Spring controller will not accept it. (Returns http 415)
Everything seems to be in order. But I am getting an error response Required request part 'file' is not present
. Why is this? I am adding this parameter to the Data form.
let formData: FormData = new FormData();
formData.append('file', photoToSave);
This is Spring Controller method for your reference.
@RequestMapping(method = RequestMethod.POST, value = "/tender/save-new/save-photo", consumes = {"multipart/form-data"})
public ResponseEntity<?> uploadPhoto(@RequestParam("file") MultipartFile file){
if (file.isEmpty()) {
ErrorResponse errorResponse = new ErrorResponse();
errorResponse.setMessage("DEBUG: Attached file is empty");
return new ResponseEntity<ErrorResponse>(errorResponse, HttpStatus.NOT_FOUND);
}
String returnPath = null;
try {
// upload stuff
} catch (IOException e) {
ErrorResponse errorResponse = new ErrorResponse();
errorResponse.setMessage(e.getMessage());
return new ResponseEntity<ErrorResponse> (errorResponse, HttpStatus.INTERNAL_SERVER_ERROR);
}
return new ResponseEntity<String>(returnPath, HttpStatus.OK);
}
EDIT - Adding the payload of the request captured by the browser
As you can see there is a param file available there.
source to share