Images Uploader UI Component For React

Description:

A simple images uploader UI component for upload and validate (client side) images with preview built with React.js.

Installation:

# Yarn
$ yarn add react-images-upload
# NPM
$ npm install react-images-upload --save

Usage:

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}
            />
        );
    }
}

Default props.

className: '',
buttonClassName: {},
buttonStyles: {},
withPreview: false,
accept: "accept=image/*",
name: "",
withIcon: true,
buttonText: "Choose images",
withLabel: true,
label: "Max file size: 5mb, accepted: jpg|gif|png|gif",
labelStyles: {},
labelClass: "",
imgExtension: ['.jpg', '.gif', '.png', '.gif'],
maxFileSize: 5242880,
fileSizeError: " file size is too big",
fileTypeError: " is not supported file extension",
errorClass: "",
style: {},
errorStyle: {}