React Drag and Drop Images

drag & drop image file upload library.

Demo

Installation

Install it from npm (using NPM).

npm i --save react-drag-n-drop-image

or:

yarn add react-drag-n-drop-image

Usage

Using react component just as simple as:

import React, { useState } from 'react';
import FileUpload from 'react-drag-n-drop-image';

function FileUpload() {
  const [files, setFiles] = useState([]);
  const onChange = file => {
    setFiles(file);
  };
  const onRemoveImage = id => {
    setFiles(prev => prev.filter(i => i.id !== id));
  };
  const onError = error => {
    console.error(error);
  };
  return (
    <div>
      <FileUpload onError={onError} body={<CustomBody />} overlap={false} fileValue={files} onChange={onChange} />
      <div className='upload-image-box'>
        {files.map(item => {
          return (
            <div onClick={() => onRemoveImage(item.id)} aria-hidden style={{ width: 150, height: 150, margin: 10 }} key={item.id}>
              <img style={{ width: 150, height: 150 }} src={item.preview} alt='images' />
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default FileUpload;

drag in box css

  .dragging {
      background-color: red;
  }

Options

| Option | Type | Description | value example | | ----------- | ----------- | ---------------------------- | --------------------------------------------- | | onChange | Fn | file upload onChange Event | const onChange = (files) => {} | | fileValue | Array | file state value | [{ id: string, file:File, preview:string }] | | body | JSX Element | jsx | <div>Drag & Drop</div> | | loadingBody | JSX ELement | jsx | <div>...Loading</div> | | maxSize | Number | size(MB) | defalut maxSize=5 | | onError | Fn | type, maxSize, overlab Error | const onError = (error) => {} | | type | Array | image type | defalut type = ['jpg', 'jpeg', 'png'] | | overlap | Boolean | overlap true or false | defalut overlap = true | | className | String | container div className | `` |

License

MIT