undefined error when trying to set state - reactjs

Question

I'm trying to upload images and then set the state for each image uploaded.
However, I keep on getting this error when hitting the 'Upload' button:
catch: TypeError: Cannot read property 'setState' of undefined
The error is occurring in this block of code:
.then(function (response) {
//handle success
console.log('then: ', response);
this.setState({
file: e.target.files[0]
});
})
Any help would be appreciated!
Thanks!
Here is the entire component:
import React, { Component } from 'react';
import axios from 'axios';
class ImageUpload extends Component {
constructor(props) {
super(props);
this.state = { file: '', imagePreviewUrl: '' };
}
_handleSubmit(e) {
e.preventDefault();
let fd = new FormData();
fd.append('image', this.state.file);
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
const postData = {
method: 'POST',
credentials: 'include',
body: fd
}
axios({
method: 'post',
url: `/api/gaming/profiles/${this.props.profileId}/files/upload`,
data: postData
})
.then(function (response) {
//handle success
console.log('then: ', response);
this.setState({
file: event.target.files[0]
});
})
.catch(function (response) {
//handle error
console.log('catch: ', response);
});
}
_handleImageChange(e) {
e.preventDefault();
let reader = new FileReader();
let file = e.target.files[0];
reader.onloadend = () => {
this.setState({
file: file,
imagePreviewUrl: reader.result
});
}
reader.readAsDataURL(file)
}
render() {
const { questionId } = this.props;
let { imagePreviewUrl } = this.state;
let $imagePreview = null;
if (imagePreviewUrl) {
$imagePreview = (<img src={imagePreviewUrl} />);
} else {
$imagePreview = (<div className="previewText">Please select an Image for Preview</div>);
}
console.log('ImageUpload Render()');
return (
<div className="previewComponent">
<input className="fileInput"
type="file"
onChange={(e) => this._handleImageChange(e)} />
<button className="submitButton"
type="submit"
onClick={(e) => this._handleSubmit(e)}>Upload Image</button>
<div className="imgPreview">
{$imagePreview}
</div>
</div>
);
}
}
export default ImageUpload;

Answer 1

Change your Promise resolver to an arrow function, it'll lexically scope this for you.
Change it to:
.then((response) => {
//handle success
console.log('then: ', response);
this.setState({
file: e.target.files[0]
});
})

Answer 2

In your _handleSubmit(e) define var self = this
then use self.setState instead of this.setState
_handleSubmit(e) {
e.preventDefault();
let fd = new FormData();
fd.append('image', this.state.file);
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
const postData = {
method: 'POST',
credentials: 'include',
body: fd
}
var self = this
axios({
method: 'post',
url: `/api/gaming/profiles/${this.props.profileId}/files/upload`,
data: postData
})
.then(function (response) {
//handle success
console.log('then: ', response);
self.setState({
file: event.target.files[0]
});
})
.catch(function (response) {
//handle error
console.log('catch: ', response);
});
}