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: {}
Preview:
Download Details:
Author: baaraak
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/baaraak/react-images-upload
License: MIT
