How to Upload Image Using react?

React Image Upload Example | Single or Multiple Images

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

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..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.
^