In the code below:
handleImageChange = (newFile, crop) => {
var string = RandomString.generate(20);
newImage(string, newFile, this.state.type, 0)
.then((result) => {
if(result) {
this.toggleModal();
}
});
}
saveCropped() {
var values = this.cropper.values();
var crop = this.cropper.crop();
var newFile = convertBase64ToFile(crop);
setTimeout(function() {
this.handleImageChange(newFile, crop);
}.bind(this), 5000);
}
The function called is saveCropped()
which then calls the handleImageChange
function.
What this function does (newImage) is send an Axios request to my server, but when I run it I get the following error: "TypeError: Object(...)(...) is undefined"
The thing is, even tho I'm getting this error, the code executes in the background with no problem i.e. the request is sent to my server and I get a response in the console.
The error points to line 5 (newImage(...))
.
The newImage function works because this is not the only place where its called and the function only returns a boolean; even so here it is:
function newImage(image_ID, image, imgType, type) {
var url = ...;
const header = {
headers: {
'Content-Type': imgType
}
};
axios.post(url, image, header)
.then(function (response) {
if(response.status === 200) {
if(type !== '1')
sessionStorage.setItem('avatar', image_ID);
console.log("Image uploaded!");
return true;
}
else
return false;
})
.catch(function (error) {
console.log(`Image could not be uploaded due to:\n${error}`);
return false;
});
}
What am I doing wrong here?
You are trying to call then()
on the return value of newImage()
… but that function doesn't have a return statement.
Presumably, you want to return the promise returned by calling axios.post
:
return axios.post(url, image, header).
etc etc
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With