Todo: Add progress loader.
import React, { Component } from 'react';
import axios from 'axios';
class FileUploadField extends Component {
state = {
selectedFile: null,
uploadProgressText: '',
uploadProgressPercent: ''
}
fileChangedHandler = (event) => {
this.setState({selectedFile: event.target.files[0]})
}
uploadHandler = () => {
const formData = new FormData()
formData.append('myFile', this.state.selectedFile, this.state.selectedFile.name)
axios.post('my-domain.com/file-upload', formData, {
onUploadProgress: progressEvent => {
console.log(Math.round(progressEvent.loaded / progressEvent.total * 100) + '%');
this.setState({selectedFile: Math.round(progressEvent.loaded / progressEvent.total * 100) + '%'})
}
})
}
render() {
return (
<div className="uploadfield">
<input
style={{display: 'none'}}
type="file"
onChange={this.fileChangedHandler}
ref={fileInput => this.fileInput = fileInput}
/>
<button onClick={() => this.fileInput.click()}>Pick file</button>
<button onClick={this.uploadHandler}>Upload!</button>
</div>
)
}
}
export default FileUploadField;