setState asynchronous while uploading image - reactjs

Question

I need to upload a file to the server for that i have given fileChangedHandler function for onClick event. but in that function setState is skipping because of asychronous operation.
i am giving my code below.
class MultiSelectField extends React.Component {
constructor(props) {
super(props);
this.state = { //image: '',
selectedFile: null};
this.fileChangedHandler = this.fileChangedHandler.bind(this);
this.fileUploadHandler = this.fileUploadHandler.bind(this)
}
fileChangedHandler = (event) => {
this.setState({selectedFile:event.target.files[0]}) // asynch and skipping
console.log(this.state.selectedFile)
this.forceUpdate()
}
fileUploadHandler = () => {
const fd = new FormData()
fd.append('myFile', this.state.selectedFile, this.state.selectedFile.name)
axios.post('my-domain.com/file-upload', formData)
console.log("selected"+JSON.stringify(this.state.selectedFile))
console.log("form data : "+fd)
}
render() {
return (
<div>
<input type="file" onChange={this.fileChangedHandler} ref="file" />
<button onClick={this.fileUploadHandler}>Upload!</button>
</div>
);
}
}
i am not getting the data while consoling this.state.selectedFile it showing null.
Thanks in advance

Answer 1

You can hide Upload Button initially and show it after selected file is set to state in a callback.
fileChangedHandler = (event) => {
this.setState({selectedFile:event.target.files[0], showUploadButton:true}, () =>{
// file has been selected
console.log(this.state.selectedFile) <-- console.log in callback
}) // asynch and skipping
this.forceUpdate()
}
render
{this.state.showUploadButton && <button onClick={this.fileUploadHandler}>Upload!</button>}
Now upload button will appear once the file has been set to state, then you'll get it.
However your problem relies here -
this line should be inside the callback after you set the state as I mentioned above.
console.log(this.state.selectedFile)
Callback of setState method makes sure that state has been set.
update
fileChangedHandler = (event) => {
this.setState({selectedFile:event.target.files[0], showUploadButton:true}, () => {
console.log(this.state.selectedFile)
this.forceUpdate()
})
}
so why this worked?
React setState method is asynchronous which is why you receive confirmation via callback when a state is set in component.
Another question may arise in your mind that why its asynchronous whether it does not call any external resource to set state (API or server call).
The answer in simple words is -
Because on every state change in React component it re-renders render() method or Virtual DOM. Now suppose you have 100s of states to be set in a component on one click, Then this should be rendering virtual DOM 100s of times. Which react actually doesn't do.
It creates batches of states. Say bifurcation of 100s of state into 2-3 batches. Now from UI perspective it accepts multiple states at once but set them in batches by grouping the states into a few batches that keeps UI free and in non blocking state.
That is why the term asynchronous is used to setState.

Answer 2

Using setState callback to call forceUpdate is unneccessary - setting state will force update (new render) ;)
Callback is usable when setting state sholud fire some actions after change is done - in this case following action is trigerred manually. KISS & readable ;)
fileChangedHandler = (event) => {
this.setState({selectedFile:event.target.files[0]})
}
you can disable upload button with simple condition
render() {
return (
<div>
<input type="file" onChange={this.fileChangedHandler} ref="file" />
<button onClick={this.fileUploadHandler} disabled={!this.state.selectedFile}>Upload!</button>
</div>
);
}
or hide it
render() {
return (
<div>
<input type="file" onChange={this.fileChangedHandler} ref="file" />
{!this.state.selectedFile &&
<button onClick={this.fileUploadHandler}>Upload!</button>
}
</div>
);
}