direct-drop-area
react based component converting the element to a drop zone for file upload or manipulations supporting direct web image drop Supporting multiple drop as well
Installation
npm i direct-drop-area
import { DirectDropArea } from 'direct-drop-area'
const acceptedFilesType = 'image/*'; // accepted file types
(<DirectDropArea
dontRead
accept={acceptedFilesType}
onDrop={(file) => console.log(file)}
handleClick={false}>
{({over, overDocument}) => (
<div
style={{
width: '600px',
height: '200px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
border: "5px solid black",
...(over
? {opacity: '50%', border: '5px dashed #259925'}
: {}),
}}
>
this is a drop zone
</div>)}
</DirectDropArea>)
For contributions
$ git clone https://github.com/sreenathch/direct-drop-area.git
$ cd direct-drop-area
$ yarn install
Scripts
Running locally
$ yarn start