@tri-bit/drizop
v1.1.0
Published
React file drop component, includes list and image gallery modes, file extension filtering and progress bar.
Downloads
39
Maintainers
Readme
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.)