react image upload preview 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
*/
Example 3: react image upload component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from 'react';
import ImageUploader from 'react-images-upload';
class App extends React.Component {
constructor(props) {
super(props);
this.state = { pictures: [] };
this.onDrop = this.onDrop.bind(this);
}
onDrop(pictureFiles, pictureDataURLs) {
this.setState({
pictures: pictureFiles
});
}
render() {
return (
<ImageUploader
withIcon={true}
buttonText='Choose images'
onChange={this.onDrop}
imgExtension={['.jpg', '.gif', '.png', '.gif']}
maxFileSize={5242880}
/>
);
}
}