Skip to content

Instantly share code, notes, and snippets.

@macabreb0b
Last active October 19, 2017 08:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save macabreb0b/c3508118f6009bdc9f1e162753fab0ae to your computer and use it in GitHub Desktop.
Save macabreb0b/c3508118f6009bdc9f1e162753fab0ae to your computer and use it in GitHub Desktop.
handle photo upload with React
import React, { Component } from 'react';
class PhotoInput extends Component {
constructor(props) {
super(props)
this.state = {
fileData: '',
}
this.handleInputChange = this.handleInputChange.bind(this);
}
handleInputChange(event) {
const input = event.target
const file = input.files[0]
const reader = new FileReader();
reader.onload = (event) => {
this.setState({
fileData: reader.result
})
}
reader.readAsDataURL(file)
}
render() {
return (
<div>
<label>
I am a photo input
<input
onChange={ this.handleInputChange }
type='file' />
</label>
</div>
)
}
}
export default PhotoInput;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment