vue3-dropzone

It's inspired by react-dropzone and implemented with vue3.

$3

``
npm install --save vue3-dropzone
`
or

`
yarn add vue3-dropzone
`

$3

Basic use with flexibility. acceptFiles is an array returned in the same format as FileList where all the dropped files are turned into a File class before saving to the array.

`vue



`

Save multiple files

Save multiple files through axios requests and FormData. You will need a backend to loop through the received files and save them individually in the loop.





`vue



`

☕️

`js
const result = useDropzone(options)
`

options
---
| property | type | description |
|----------|------|-------------|
| onDrop | Function | Cb for when the drop event occurs. Note that this callback is invoked after the getFilesFromEvent callback is done. |
| accept | String / Array<String> | Set accepted file types. See https://github.com/okonet/attr-accept for more information. |
| disabled | Boolean | Enable/disable the dropzone |
| maxSize | Number | Maximum file size (in bytes) |
| minSize | Number | Minimum file size (in bytes) |
| multiple | Number | Allow of multiple files |
| maxFiles | Number | Maximum accepted number of files The default value is 0 which means there is no limitation to how many files are accepted |
| getFilesFromEvent | Function | Use this to provide a custom file aggregator |
| onDragenter | Function | Cb for when the dragenter event occurs. |
| onDragover | Function | Cb for when the dragover event occurs |
| onDragleave | Function | Cb for when the dragleave event occurs |
| onDropAccepted | Function | Cb for when the drop event occurs. Note that if no files are accepted, this callback is not invoked. |
| onDropRejected | Function | Cb for when the drop event occurs. Note that if no files are rejected, this callback is not invoked. |
| onFileDialogCancel | Function | Cb for when closing the file dialog with no selection |
| preventDropOnDocument | Boolean | If false, allow dropped items to take over the current browser window |
| noClick | Boolean | If true, disables click to open the native file selection dialog |
| noKeyboard | Boolean | If true, disables SPACE/ENTER to open the native file selection dialog. Note that it also stops tracking the focus state. |
| noDrag | Boolean | If true, disables drag 'n' drop |
| noDragEventsBubbling | Boolean | If true, stops drag event propagation to parents |

result
---
| property | type | description |
|----------|------|-------------|
| isFocused | Ref<Boolean> | |
| isFileDialogActive | Ref<Boolean> | |
| isDragActive | Ref<Boolean> | |
| isDragAccept | Ref<Boolean> | |
| isDragReject | Ref<Boolean> | |
| draggedFiles | Ref<Array> | dragged files |
| acceptedFiles | Ref<Array> | accepted files |
| fileRejections | Ref<Array> | files rejections |
| getRootProps | Function | Function to generate element props which contains input |
| getInputProps | Function | Function to generate input props |
| rootRef | Ref<HTMLElement> | ref a dom element |
| inputRef | Ref<HTMLElement> | ref a input element |
| open | Function | Open file selection dialog |

$3

`
cd examples
yarn install
yarn dev
``