I'm building an App using reactjs and I'm questioning axios.
I have an axios.post
and following that I call a function
this.props.onChangeStep1()
with the way it is written...am I safe ?
Will this.props.onChangeStep1() always wait for res.data to be full ?
onChangeHandler = event => {
console.log(event.target.files[0]);
this.setState(
{
selectedFile: event.target.files[0],
fileName: event.target.files[0].name,
loaded: 0
},
() => {
console.log(this.state.selectedFile);
console.log(this.state.loaded);
const formData = new FormData();
formData.append("file", this.state.selectedFile);
axios
.post(`/upload`, formData, {
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(res => {
console.log(res);
console.log(res.data);
});
this.props.onChangeStep1(); //<---- Will this wait for res.data ?
}
);
No. It won't wait. You should put it into .then:
onChangeHandler = event => {
console.log(event.target.files[0]);
this.setState(
{
selectedFile: event.target.files[0],
fileName: event.target.files[0].name,
loaded: 0
},
() => {
console.log(this.state.selectedFile);
console.log(this.state.loaded);
const formData = new FormData();
formData.append("file", this.state.selectedFile);
axios
.post(`/upload`, formData, {
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(res => {
console.log(res);
console.log(res.data);
this.props.onChangeStep1();
});
}
In your example onChangeStep will be executed before the result from axios.
You can call this.props.onChangeStep1() inside .then() block:
axios
.post(`/upload`, formData, {
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(res => {
console.log(res);
console.log(res.data);
this.props.onChangeStep1();
});
Or you can use async/await
postData = async () => {
const formData = new FormData();
formData.append("file", this.state.selectedFile);
try {
const result = await axios.post(`/upload`, formData, /* all your headers..*/)
this.props.onChangeStep1(); // this line will be executed after post request
} catch(error){
// do something with error.
}
}
}
onChangeHandler = event => {
this.setState(
{
selectedFile: event.target.files[0],
fileName: event.target.files[0].name,
loaded: 0
},
this.postData)
}
Related
When posting data to an API and get a response, if I hardcode the body data inside the fetch call (body: "XYZ12345") it works fine, this is an example:
const vatValidationRequest =
fetch(
'/api/vies/validateVAT.php', {
method: 'POST',
body: "XYZ12345",
headers: {
'Content-Type': 'application/text'
}
})
.then((response) => response.text())
.then((responseText) => {
return responseText;
});
const validateVAT = async () => {
const viesResponse = await vatValidationRequest;
console.log(viesResponse);
};
validateVAT();
However, if I try to pass the body data as an argument (body: vatNumber), the validateVAT() function returns "undefined". This is what's not working:
const vatValidationRequest = (vatNumber) => {
fetch(
'/api/vies/validateVAT.php', {
method: 'POST',
body: vatNumber,
headers: {
'Content-Type': 'application/text'
}
})
.then((response) => response.text())
.then((responseText) => {
return responseText;
});
}
const validateVAT = async (vatNumber) => {
const viesResponse = await vatValidationRequest(vatNumber);
console.log(viesResponse);
};
validateVAT("XYZ12345");
Any clues about how to pass the argument to the async function? thanks!
The problem is that you are not returning the response from the method. You should do this:
const vatValidationRequest = (vatNumber) => {
return fetch(
'/api/vies/validateVAT.php', {
method: 'POST',
body: vatNumber,
headers: {
'Content-Type': 'application/text'
}
})
.then((response) => response.text())
.then((responseText) => {
return responseText;
});
}
const validateVAT = async (vatNumber) => {
const viesResponse = await vatValidationRequest(vatNumber);
console.log(viesResponse);
};
validateVAT("XYZ12345");
I need to include the image as binary data in my uploading request using multipart form data, and it seems not working, any advise will be appreciated.
my code:
const [selectedFile, setSelectedFile] = useState(null);
const handleSubmit = async (event) => {
event.preventDefault();
const formData = new FormData();
formData.append('selectedFile', new Blob([selectedFile], { type: 'application/octet-stream' }));
const data = {
uploadLink,
formData,
};
const headers = {
'Content-Type': 'application/octet-stream' ,
Accept: 'application/vnd.vimeo.*+json;version=3.4',
};
try {
await axios
.post(`${backendPostPath}/thumbnail-upload`, data, {
headers,
})
.then((response) => {
applyThumbnial();
console.log(response);
});
} catch (error) {
console.log(error);
}
};
const handleFileSelect = (event) => {
setSelectedFile(event.target.files[0]);
};
include formData as axios data parameter instead of your data object, so you can also include uploadLink in the formData:
const formData = new FormData();
formData.append('selectedFile', new Blob([selectedFile], { type: 'application/octet-stream' }));
formData.append('uploadLink', uploadLink)
//...
await axios
.post(`${backendPostPath}/thumbnail-upload`, formData, {
headers,
})
I have a post method
uploadFile: async function () {
const formData = new FormData();
formData.append("file", this.file);
let url = `http://...`;
try {
this.source = axios.CancelToken.source();
const res = await axios.post(url, formData, {
headers: {
Authorization: "Token " + this.$store.getters.getToken,
"Content-Type": "multipart/form-data",
},
cancelToken: this.source.token,
});
} catch (error) {
}
}
and cancel method
cancelLoad: function () {
this.source.cancel('cancel upload');
},
The request was canceled, but after reloading my page, the file uploaded.
I've fixed it.
const CancelToken = axios.CancelToken;
let cancel;
const res = await axios.post(url, formData, {
headers: {...},
cancelToken: new CancelToken(function executor(c) {
cancel = c;
}),
}...
cancel();
I'm testing the behavior of a function with a success api call, i managed to mock the fetch response, but the function inside then callback are not called, even if console.log showing the function is going inside the callback.
My test is failing here:
Here is the function im testing:
tryUserLogin() {
this.setState({loading: true});
const randomPassword = Math.random()
.toString(36)
.slice(-8);
const email = this.state.inputEmail;
const name = this.state.inputName;
const formData = new FormData();
formData.append('email', email);
formData.append('name', name);
formData.append('password', randomPassword);
const query = Util.urlForAddUser();
fetch(query, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'multipart/form-data',
},
body: formData,
})
.then(response => response.json())
.then(responseJson => {
if (responseJson.code === 200) {
firebase.analytics().logEvent('userSuccessfulLogIn', {
userId: responseJson.response.id,
});
const userData = responseJson.response;
console.log('userData',userData) // <==== i can see this in console
this.storeUserData(userData, name);
this.setState({loading: false});
this.handleModalVisibility();
this.props.handelAddComment();
console.log('finish')
} else {
Alert.alert(
this.props.t('common:title_error'),
this.props.t('common:error'),
);
this.setState({loading: false});
}
})
.catch(error => {
firebase.crashlytics().log(
`error tryUserLogin
LoginModal===>> ${error.message}`,
);
Alert.alert(
this.props.t('common:title_error'),
this.props.t('common:error'),
);
this.setState({loading: false});
});
}
And here is the test:
it('testing tryUserLogin code 200 case', async () => {
global.FormData = require('FormData');
global.fetch = jest.fn();
const userData = {
code: 200,
response: {
id: 1,
email: 'test+1234567890#t.com',
},
};
const name = 'test';
const email = 'test#t.com';
const spyStoreUserData = jest.spyOn(instance, 'storeUserData');
const spyHandelModalVisibility = jest.spyOn(
instance,
'handleModalVisibility',
);
fetch.mockImplementation(() => {
return Promise.resolve({
status: 200,
json: () => {
return Promise.resolve({
...userData,
});
},
});
});
instance.setState({inputName: name});
instance.setState({inputEmail: email});
await instance.tryUserLogin();
expect(spyStoreUserData).toBeCalledWith(userData.response, name);
expect(fetch.mock.calls[0][0]).toBe('testQuery');
expect(instance.state.loading).toBe(false);
expect(spyHandelModalVisibility).toBeCalled();
expect(mockHandelAddComment).toBeCalled();
});
i am new to Reactjs, Still struggling to learn react. I have some problem related how i can call two functions in one onChange Event, I tried alot but did't get idea how it would be possible. Could You please help me. Thank You
Function 1
handleChange = ({ fileList }) => this.setState({ fileList });
Function 2
handleUpload = e => {
const reader = new FileReader();
const storeUser = JSON.parse(localStorage.getItem('user'));
reader.onload = function(upload) {
fetch(`http://..../api/s3/uploadtoaws`, {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
method: 'POST',
body: JSON.stringify({
userId: storeUser._id,
type: 'employee',
content: upload.target.result,
key: e.file.name,
oldKey: '',
}),
})
.then(response => response.json())
.then(res => {
console.warn(res);
});
// .done();
};
reader.readAsDataURL(e.file.originFileObj);
};
Event Implementation
<Upload
listType="picture-card"
fileList={fileList}
onPreview={this.handlePreview}
onChange={this.handleChange}
>
Just call the function inside JSX with specified argument, however it's important to use your handleUpload function as a currying function, so you will have access to both event and fileList.
onChange={this.handleUpload(someObj)}
handleUpload = ({ fileList }) => (e) => { // fileList is a field in someObj
this.setState({ fileList });
const reader = new FileReader();
const storeUser = JSON.parse(localStorage.getItem('user'));
reader.onload = function(upload) {
fetch(`http://..../api/s3/uploadtoaws`, {
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
method: 'POST',
body: JSON.stringify({
userId: storeUser._id,
type: 'employee',
content: upload.target.result,
key: e.file.name,
oldKey: '',
}),
})
.then(response => response.json())
.then(res => {
console.warn(res);
});
// .done();
};
reader.readAsDataURL(e.file.originFileObj);
}