React.js Image Upload Preview Animation and Validation Component Using react-images-upload Full Tutorial 2020

React.js Image Upload Preview Animation and Validation Component Using react-images-upload Full Tutorial 2020

 

 

 

 

 

 

 

 

 

 

 

 

Get Started

 

 

In order to get started we need to install this library by using the command given below

 

npm i react-images-upload

 

 

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 (
          <div>
            <ImageUploader
                withIcon={false}
                buttonText='Choose images'
                onChange={this.onDrop}
                imgExtension={['.jpg', '.gif', '.png', '.gif']}
                maxFileSize={5242880}
                withPreview={true}
            />

            </div>

            
        );
    }
}

export default App;

 

 

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;

 

 

 

Important properties

 

withIcon It generates a upload icon to be used inside the component

See also  Build a React.js Trivia Quiz Game With High Score in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

withPreview It generates a small animated preview of the image which needs to be uploaded to the server

imgExtension It provided the validation of the image formats which needs to be uploaded to the server

maxFileSize It validates the maximum size of the image which needs to be uploaded to the server

buttonText It provides the label of the button which will be written on the button

onChange This is will be the callback function which will trigger once the image file is dropped or changed

 

 

Leave a Reply