dropzone-vue

!NPM Downloads
!Snyk Vulnerabilities for npm package
!NPM License
!NPM Version
!npm collaborators

:bomb:

Features Live Demo Link: Click here !!

> Vue3 Library Component for drag’n’drop file uploads with image previews.

!demo

$3

* No dependencies
* Drag and drop file uploads
* Custom accepted file types
* XHR custom: Header, url, method and form data.
* Parallel upload with different request
* Multiple upload files in a single request
* Chunking
* Custom styling
* Events
* Provide your own markup for drop, error and success message

Install and basic usage

``bash
$ npm install --save dropzone-vue
`
Register the component

`js
import DropZone from 'dropzone-vue';

// optionally import default styles
import 'dropzone-vue/dist/dropzone-vue.common.css';

createApp(App)
.use(DropZone)
.mount('#app');
`

Now your component inside a code:

`vue


`

$3

#### url
Type: String

Required: false

Default: window.localtion

Upload url

`html

`

#### method
Type: String

Required: false

Default: POST

Upload method can be POST or PUT

`html

`

#### headers
Type: Object

Required: false

Default: {}

Send additional headers to the server.

`html

`
#### paramName
Type: String

Required: false

Default: file

Formdata key for file upload request

`html

`

#### xhrTimeout
Type: number

Required: false

Default: 60000

The timeout for the XHR requests in milliseconds

`html

`

#### withCredentials
Type: boolean

Required: false

Default: false

withCredentials option for XHR requests

`html

`
#### uploadOnDrop
Type: boolean

Required: false

Default: true

Process the upload automatically on drop or on file selection
if it's set to true

`html

`

if it's set to false, the upload can be triggered with:
`html

`

`js
dropzone.value.processQueue();
`

#### retryOnError
Type: boolean

Required: false

Default: false

Retry an upload if it fail.

`html

`

#### multipleUpload
Type: boolean

Required: false

Default: false

Send more items in one request, this is disabled in case of the prop chunking is true.

`html

`

#### parallelUpload
Type: number

Required: false

Default: 3

Parallel request upload to be processed

`html

`

#### maxFiles
Type: number

Required: false

Default: null

Max files number accepted by the Dropzone, if it not set
there is no limit.

`html

`

#### maxFileSize
Type: number

Required: false

Default: 1000000

Bytes value for the max upload size allowed, default 1mb

`html

`

#### hiddenInputContainer
Type: string | Element

Required: false

Default: body

Element or query selector where the hidden Input it's placed

`html

`

#### clickable
Type: boolean

Required: false

Default: true

If active enable the dropzone to be clickable and show the files selection
`html

`

#### acceptedFiles
Type: array

Required: false

Default: null

Array that contain the accepted files, possible values:
['image', 'doc', 'video', 'png', ... , 'audio' ]

`html

`
#### chunking
Type: boolean

Required: false

Default: false

Enable the upload chunking feature,
if this is active the multipleUpload for request will be set to false.

`html

`

#### numberOfChunks
Type: number

Required: false

Default: 10

If the chunking mode is active this property represents the number of
chunks with which the file will be split

`html

`

#### dropzoneClassName
Type: string

Required: false

Default: dropzone__box

custom class for the dropzone

`html

`
#### dropzoneMessageClassName
Type: string

Required: false

Default: dropzone__message--style

custom class for the dropzone message

`html

`

#### dropzoneItemClassName
Type: string

Required: false

Default: dropzone__item--style

custom class for the dropzone item

`html

`
#### dropzoneDetailsClassName
Type: string

Required: false

Default: dropzone__details--style

custom class for the dropzone details

`html

`

$3

#### config-update

Parameters:
* config config object with the new values

Called when a props is changed

`html

`


#### added-file

Parameters:
* item {id: 'fileid', file: File}

Called when a file is valid ( type and size ) and added to the queue.

`html

`
#### removed-file

Parameters:
* item {id: 'fileid', status: "DONE|ERROR|QUEUE", file: File}

Called when a file is removed.

`html

`
#### uploaded

Parameters:
* items [{file: File}]

Called when a file or files are uploaded.

`html

`

#### error-upload

Parameters:
* error {ids: Array(['fileid']), errorType: "error type"}

Called when a file or files uploads fail.

`html

`

#### sending

Parameters:
* files Array(File)
* xhr XMLHttpRequest
* formData FormData

Called when a file is going to be uploaded.

`html

`

#### error-add

Parameters:
* files Array(File)
* error String {'INVALID_TYPE'|'MAX_FILE'|'MAX_FILE_SIZE'}

Called when a file is not added for one of this reason
* invalid type
* max file size
* max file number inside the dropzone

`html

``