@yelysei/react-files-dnd
A light-weighted and customizable React Component that handles Files Drag & Drop.
Installation
Install with npm:
npm i @yelysei/react-files-dnd
or with yarn:
yarn add @yelysei/react-files-dnd
Usage
First you need to import FilesDragAndDrop component:
import FilesDragAndDrop from '@yelysei/react-files-dnd';And then use it like this:
<FilesDragAndDrop
onUpload={(files) => console.log(files)}
count={3}
formats={['jpg', 'png', 'svg']}
containerStyles={{
width: '200px',
height: '200px',
border: '1px solid #cccccc',
}}
openDialogOnClick
>
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
Drop files here
</div>
</FilesDragAndDrop>Props
Here is the list of all available props:
| Name | Type | Required | Description |
|---|---|---|---|
onUpload |
function | + | Function that will be called when files are dropped into the component and successfully validated. Receives list of files
|
children |
node | + | Inner content of the component |
count |
number | Max count of files | |
formats |
string[] | List of available file formats | |
openDialogOnClick |
boolean | If enabled, file dialog will be opened on click at the component | |
hoverText |
string or function | Message that will appear when files are dragged over the component. Function receives available file formats and max files count. Default value: 'Drop files here' |
|
successText |
string or function | Message that will appear when files are successfully uploaded. Function receives list of uploaded files. Default value: 'Successfully uploaded' |
|
errorCountText |
string or function | Message that will appear when more files than available are dropped into the component. Function receives available max files count. Default value: ({count}) => `Only ${count} file${count !== 1 ? 's' : ''} can be uploaded at a time` |
|
errorFormatText |
string or function | Message that will appear when files with incorrect formats are dropped into the component. Function receives available file formats. Default value: ({formats}) => `Only following file formats are acceptable: ${formats.join(', ')}` |
|
containerStyles |
CSS properties | Custom styles for container | |
hoverMessageStyles |
CSS properties | Custom styles for hover message | |
successMessageStyles |
CSS properties | Custom styles for success message | |
errorMessageStyles |
CSS properties | Custom styles for error message | |
successTime |
number | Time duration in milliseconds when the success message will be displayed. Default value: 1000 |
|
errorTime |
number | Time duration in milliseconds when the error message will be displayed. Default value: 2000 |
|
onDrop |
function | Function that will be called when files are dropped into the component but not validated yet. Receives list of files
|
|
onDragEnter |
function | Function that will be called when dragged files entered the component | |
onDragLeave |
function | Function that will be called when dragged files leaved the component |