taking image as input in react JS code example
Example 1: show preview of input image javascript react
const React = require('react')
class Upload extends React.Component {
constructor(props){
super(props)
this.state = {
file: null
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(event) {
this.setState({
file: URL.createObjectURL(event.target.files[0])
})
}
render() {
return (
<div>
<input type="file" onChange={this.handleChange}/>
<img src={this.state.file}/>
</div>
);
}
}
module.exports = Upload
Example 2: react image upload
/* Answer to: "react image upload" */
/*
"react-images-upload" is a simple component for upload and
validate (client side) images with preview built with React.js.
This package use "react-flip-move [1]" for animate the file preview
images.
Download it here:
https://www.npmjs.com/package/react-images-upload
or if you need help or don't want to use packages,
you can watch this video:
https://www.youtube.com/watch?v=XeiOnkEI7XI
[1] Link to "react-flip-move", mentioned in the
"react-images-upload" summary:
https://github.com/joshwcomeau/react-flip-move
*/