React-drag-n-drop-image NPM

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