How to Upload Images Using react?
The file upload features are very important for
web applications. It will help us to facilitate actions like setting a customer
profile picture, setting up dynamic galleries, remote file storage, and file
sharing, and many other functionalities.
Simple component for upload images with preview
built with React using FileReader.
As
an Example - this example will help you to upload the
Images file,
import React, { Component } from 'react';
class ImageUpload extends Component {
constructor(props) {
super(props);
this.state = {
file: '',
imagePreview_Url: ''
};
this.handleImageChange = this.handleImageChange.bind(this);
this.SaveSubmit = this.SaveSubmit.bind(this);
}
SaveSubmit(e) {
e.preventDefault();
console.log(this.state.imagePreview_Url);
//TODO - save > this.state.imagePreview_Url in you DB using your API logic.
}
handleImageChange(e) {
e.preventDefault();
let reader = new FileReader();
let file = e.target.files[0];
reader.onloadend = () => {
this.setState({
file: file,
imagePreview_Url: reader.result
});
}
reader.readAsDataURL(file)
}
render() {
return (
<div style={{paddingTop:40}}>
<div>
<input type="file" onChange={this.handleImageChange} />
<button onClick={this.SaveSubmit}>Save/Upload Image in DB</button>
</div>
<div>
<img src={this.state.imagePreview_Url} />
</div>
</div>
)
}
}
export default ImageUpload;
Download source code from Github
Explore another example for upload multiple files
The Result looks like,
