Git Product home page Git Product logo

react-images-upload's Introduction

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

react-images-upload's People

Contributors

jakehartnell avatar dependabot[bot] avatar baaraak avatar galanx avatar barakc avatar ivnnv avatar benikeyserman avatar juusaw avatar kibernetika avatar joshuaai avatar upasanaa avatar shinyaigeek avatar misclg avatar kristajg avatar ivancaceres avatar frankzang avatar benjiekibblewhite avatar albertoivo avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.