Cacher is the code snippet organizer for pro developers

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;