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

npm install --save react-images-upload

Usage

Using Classes

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(pictureFiles, pictureDataURLs) {
    this.setState({
      pictures: this.state.pictures.concat(pictureFiles)
    });
  }

  render() {
    return (
      <ImageUploader
        withIcon={true}
        buttonText="Choose images"
        onChange={this.onDrop}
        imgExtension={[".jpg", ".gif", ".png", ".gif"]}
        maxFileSize={5242880}
      />
    );
  }
}

Using Hooks

import React, { useState } from "react";
import ImageUploader from "react-images-upload";

const App = props => {
  const [pictures, setPictures] = useState([]);

  const onDrop = picture => {
    setPictures([...pictures, picture]);
  };
  return (
    <ImageUploader
      {...props}
      withIcon={true}
      onChange={onDrop}
      imgExtension={[".jpg", ".gif", ".png", ".gif"]}
      maxFileSize={5242880}
    />
  );
};

export 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