Images uploader UI component

Simple component for upload and validate (client side) images with preview built with React.js. This package use 'react-flip-move' for animate the file preview images.

Installation

1npm install --save react-images-upload

Usage

Using Classes

1import React from "react";
2import ImageUploader from "react-images-upload";
3
4class App extends React.Component {
5  constructor(props) {
6    super(props);
7    this.state = { pictures: [] };
8    this.onDrop = this.onDrop.bind(this);
9  }
10
11  onDrop(pictureFiles, pictureDataURLs) {
12    this.setState({
13      pictures: this.state.pictures.concat(pictureFiles)
14    });
15  }
16
17  render() {
18    return (
19      <ImageUploader
20        withIcon={true}
21        buttonText="Choose images"
22        onChange={this.onDrop}
23        imgExtension={[".jpg", ".gif", ".png", ".gif"]}
24        maxFileSize={5242880}
25      />
26    );
27  }
28}

Using Hooks

1import React, { useState } from "react";
2import ImageUploader from "react-images-upload";
3
4const App = props => {
5  const [pictures, setPictures] = useState([]);
6
7  const onDrop = picture => {
8    setPictures([...pictures, picture]);
9  };
10  return (
11    <ImageUploader
12      {...props}
13      withIcon={true}
14      onChange={onDrop}
15      imgExtension={[".jpg", ".gif", ".png", ".gif"]}
16      maxFileSize={5242880}
17    />
18  );
19};
20
21export default App;

Available Options

parameter	type	default	description
className	String	-	Class name for the input.
onChange	Function	-	On change handler for the input.
buttonClassName	String	-	Class name for upload button.
buttonStyles	Object	-	Inline styles for upload button.
withPreview	Boolean	false	Show preview of selected images.
defaultImages	Array	['imgUrl1', 'imgUrl2']	Pre-populate with default images.
accept	String	"accept=image/*"	Accept attribute for file input.
name	String	-	Input name.
withIcon	Boolean	true	If true, show upload icon on top
buttonText	String	'Choose images'	The text that display in the button.
buttonType	String	'submit'	The value of the button's "type" attribute.
withLabel	Boolean	true	Show instruction label
label	String	'Max file size: 5mb, accepted: jpg, gif, png	Label text
labelStyles	Object	-	Inline styles for the label.
labelClass	string	-	Class name for the label
imgExtension	Array	['.jpg', '.gif', '.png', '.gif']	Supported image extension (will use in the image validation).
maxFileSize	Number	5242880	Max image size.
fileSizeError	String	" file size is too big"	Label for file size error message.
fileTypeError	String	" is not supported file extension"	Label for file extension error message.
errorClass	String	-	Class for error messages
errorStyle	Object	-	Inline styles for errors
singleImage	Boolean	false	Upload one single image

Development

Clone the repo and run npm ci. Start development server with npm start.

License

MIT