1.1.0 • Published 3 years ago
@tri-bit/drizop v1.1.0
Drizop
Easy to use file drop for React. Includes list and image gallery modes, file extension filtering and progress bar.
Images source: Pexels.com
Files can be removed by hovering, and then clicking the 'x' icon:
Usage
import Drizop from '@tri-bit/drizop';
//list mode example with filtered extensions
<Drizop onLoadCallback={handleFileDrop} allowedFileTypes="txt, doc, rtf"/>
//image gallery example with additional props
<Drizop
mode="image"
onLoadCallback={handleFileDrop}
message="Drop your image(s) here"
fileLimit={3}
style={{border:"3px solid black"}}
/>Props
| props | description |
|---|---|
| mode | "image" or "list" (Default value: "list") |
| onLoadCallback | Use this callback to send the dropped files to your application (for uploading, etc.) Every time a new file is dropped or a file removed this callback will send the updated file array. |
| allowedFileTypes | a comma seperated string of the allowed extensions (Example: "png, txt, jpg") |
| clearPreviousOnDrop | reset the file list on a new file drop (Default value: "false") |
| progress | You can display upload progress percentage (0-100) Setting above zero will lock file drops / removal. |
| message | Text in the center of component. (Default value: 'Drop File(s) Here') |
| button | Set to "true" to add a clickable button to the uploader - uses the browsers file open dialog (Default value: "false") |
| buttonMessage | Text inside the optional button (Default value: "Click Here To Upload") |
| fileLimit | Sets max number of files allowed (Default value: 8) |
| style | style object applied to Drizop component (Default value: {}) |
Notes
- .dmg, .exe, .php extensions are automatically blocked (your backend should still do safety checks on uploaded files just to be safe.)
- You can use the optional style prop to easily change Drizop's width or border style (and more.)