How to file upload React js web api not work - reactjs

Question

I am working on file upload React with web API. After uploading the file, server side shows that
null.,..................................................................
import React, { PropTypes } from 'react';
import axios from 'axios';
class Dashboard extends React.Component {
constructor(props){
var files;
super(props);
this.state = {
selectedFile: null
}
}
fileChangedHandler = event => {
this.setState({
selectedFile: event.target.files[0]
})
var file = this.refs.file.files[0].name;
let reader = new FileReader();
reader.onloadend = () => {
this.setState({
imagePreviewUrl: reader.result
});
}
reader.readAsDataURL(event.target.files[0])
}
async submit(e){
e.preventDefault();
await this.addImage(this.state.selectedFile);
};
addImage = async (file) => {
console.log(this.state.selectedFile);
await fetch('http://localhost:32188/Api/Authenticate/Uploadfile',
{
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: this.state.selectedFile
}
)
}
render() {
<form onSubmit={e => this.submit(e)} enctype="multipart/form-data">
<input ref="file" type="file" name="user[image]" onChange={this.fileChangedHandler} style={{padding: '5px', marginLeft: '31px'}} />
<div className="signin_form_button">
<input type="submit" value="Upload" className="signin_form_buttonstyle" />
</div>
</form>
}
}
Serverside Code
Model
public class ImageModel
{
public IFormFile File { get; set; }
}
Controller
[System.Web.Http.Route("Api/Authenticate/Uploadfile")]
[System.Web.Http.HttpPost]
public void CreateImage([System.Web.Http.FromBody] ImageModel model)
{
var file = model.File;
}
Following Error Message is displayed
500 Internal Server Error Occurred
Message: "An error has occurred."
ExceptionMessage: "Object reference not set to an instance of an object."
Please Help.
Link:https://codesandbox.io/s/vigorous-mestorf-osf90