A React component that provides functionality for drag and drop file uploads and image validation. It is lightweight and easy to customize.

How to use it:

1. Install and import.

# Yarn
$ yarn add react-images-uploading

# NPM
$ npm i react-images-uploading

import React from "react";
import ReactDOM from "react-dom";
import ImageUploading from "react-images-uploading";

2. The example shows how to create a basic image uploader component in your app.

function App() {
  const [images, setImages] = React.useState([]);
  const maxNumber = 69;
  const onChange = (imageList, addUpdateIndex) => {
    // data for submit
    console.log(imageList, addUpdateIndex);
    setImages(imageList);
  };
  return (
    <div className="App">
      <ImageUploading
        multiple
        value={images}
        onChange={onChange}
        maxNumber={maxNumber}
        dataURLKey="data_url"
      >
        {({
          imageList,
          onImageUpload,
          onImageRemoveAll,
          onImageUpdate,
          onImageRemove,
          isDragging,
          dragProps
        }) => (
          // write your building UI
          <div className="upload__image-wrapper">
            <button
              style={isDragging ? { color: "red" } : null}
              onClick={onImageUpload}
              {...dragProps}
            >
              Click or Drop here
            </button>
            &nbsp;
            <button onClick={onImageRemoveAll}>Remove all images</button>
            {imageList.map((image, index) => (
              <div key={index} className="image-item">
                <img src={image.data_url} alt="" width="100" />
                <div className="image-item__btn-wrapper">
                  <button onClick={() => onImageUpdate(index)}>Update</button>
                  <button onClick={() => onImageRemove(index)}>Remove</button>
                </div>
              </div>
            ))}
          </div>
        )}
      </ImageUploading>
    </div>
  );
}

3. Available props.

value = [], // List of images
onChange,
onError,
children,
dataURLKey = DEFAULT_DATA_URL_KEY,
multiple = false,
maxNumber = INIT_MAX_NUMBER,
acceptType,
maxFileSize,
resolutionWidth,
resolutionHeight,
resolutionType,
inputProps = {},

Preview:

Download Details:

Author: vutoan266

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/vutoan266/react-images-uploading

License: MIT