SangMinL96
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-imageor:
yarn add react-drag-n-drop-imageUsage
Using react component just as simple as:
`jsx static
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 (
<FileUpload onError={onError} body={<CustomBody />} overlap={false} fileValue={files} onChange={onChange} />
);
}
{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' />
);
})}
export default FileUpload;
## drag in box css
```jsx static
.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 | |