How to Upload Image 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.
This example will help you to upload the Images
file(s) (single or multiple) in the React. So please follow the below installation
and use case steps.
Installation
- NPM command
npm install --save react-images-upload
Use
of this,
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(picture) {
this.setState({
pictures: this.state.pictures.concat(picture),
});
}
render() {
return (
<ImageUploader
withIcon={true}
buttonText='Choose images'
onChange={this.onDrop}
imgExtension={['.jpg', '.gif', '.png', '.gif']}
maxFileSize={5242880}
/>
);
}
}
Available
Options -
1. onChange:
It is onChange method and use to handle the change events for the input.
2. withIcon:
It is a Boolean type. If set flag true (withIcon: true) then show upload icon
on top.
3. buttonText:
It is a String type and It used for display
the text in the button.
4. imgExtension:
It is an Array and used for supported
image extension ['.jpg', '.gif', '.png', '.gif']. This will use in the image
validation also.
5. maxFileSize:
It is Number type and use to set the Max image size is 5242880s.
6. singleImage:
It is a Boolean type. If set the flag true that means only a single image can
be selected
7. And
others
Source for other available options and example – click…
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|