React.js File Not Uploading Spring Server

In my project, I have Spring Boot in the back-end and React.js in the front.

My back-end is working fine, I know, because I have tested it with Postman.

In the front-end to upload file, I have a named SubmitAssignment, which looks like this:

uploadFile = (e) =>{
    var formData = new FormData();
    formData.append("file", this.state.file);
    var xhr = new XMLHttpRequest();"POST", "http://localhost:8080/uploadFile");
    xhr.onload = function() {
        var response = JSON.parse(xhr.responseText);
        if(xhr.status === 200) {
            console.log("upload successful");
        } else {
            console.log("upload failed");
onInputChange = (e) =>{;
render() {
    return (
            <h1>Please select file(s):</h1>
                <input className="input-file" id="my-file" type="file" onChange={this.onInputChange}/>
                <button onClick={this.uploadFile}>Upload</button>

But the problem is upload is failing every time. Maybe the reason is the path, not sure. I tried to console.log the path. And what I got is C:\fakepath\Screenshot (187).png

Now my question if it is because of path, how can I do it correctly(as far as I know browser doesn't allow it for security concern)?

Otherwise, what is the problem? How to solve it ?

The error in browser console :

POST http://localhost:8080/uploadFile 400


{"timestamp":"2019-09-16T07:20:30.382+0000","status":400,"error":"Bad Request","message":"Required request part 'file' is not present","trace":" Required request part 'file' is not present\r\n\tat .......

Here is the full error message.

If the REST is needed, for any reason :

public UploadFileResponse uploadFile(@RequestParam("file") MultipartFile file) {
    String fileName = fileStorageService.storeFile(file);
    String fileDownloadUri = ServletUriComponentsBuilder.fromCurrentContextPath()
    return new UploadFileResponse(fileName, fileDownloadUri,
            file.getContentType(), file.getSize());


From what I could see, in onInputChange() you are assigning the target value; (This has the file path not the actual file)

Instead change to below, Important ![0];

And some suggestions are, use Fetch Api to send post request rather than using Plain old Javascript

const formData = new FormData();
formData.append("file", this.state.file);
fetch('http://localhost:8080/uploadFile', {
    method: 'POST',
    body: formData
   .then(success => console.log(success))
   .catch(error => console.log(error));

In your Spring boot controller use @RequestPart("file")

public UploadFileResponse uploadFile(@RequestPart("file") MultipartFile file) {