Vue3 Library Component for drag’n’drop file uploads with image previews..
npm install 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
* 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
``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
url="http://localhost:5000/item"
:uploadOnDrop="true"
:multipleUpload="true"
:parallelUpload="3"/>
`
#### url
Type: Stringfalse
Required: window.localtion
Default:
Upload url
`html`
#### method
Type: Stringfalse
Required: POST
Default:
Upload method can be POST or PUT
`html`
#### headers
Type: Objectfalse
Required: {}
Default:
Send additional headers to the server.
`html`String
#### paramName
Type: false
Required: file
Default:
Formdata key for file upload request
`html`
#### xhrTimeout
Type: numberfalse
Required: 60000
Default:
The timeout for the XHR requests in milliseconds
`html`
#### withCredentials
Type: booleanfalse
Required: false
Default:
withCredentials option for XHR requests
`html`boolean
#### uploadOnDrop
Type: false
Required: true
Default:
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: booleanfalse
Required: false
Default:
Retry an upload if it fail.
`html`
#### multipleUpload
Type: booleanfalse
Required: false
Default:
Send more items in one request, this is disabled in case of the prop chunking is true.
`html`
#### parallelUpload
Type: numberfalse
Required: 3
Default:
Parallel request upload to be processed
`html`
#### maxFiles
Type: numberfalse
Required: null
Default:
Max files number accepted by the Dropzone, if it not set
there is no limit.
`html`
#### maxFileSize
Type: numberfalse
Required: 1000000
Default:
Bytes value for the max upload size allowed, default 1mb
`html`
#### hiddenInputContainer
Type: string | Elementfalse
Required: body
Default:
Element or query selector where the hidden Input it's placed
`html`
#### clickable
Type: booleanfalse
Required: true
Default:
If active enable the dropzone to be clickable and show the files selection
`html`
#### acceptedFiles
Type: arrayfalse
Required: null
Default:
Array that contain the accepted files, possible values:
['image', 'doc', 'video', 'png', ... , 'audio' ]
`html`boolean
#### chunking
Type: false
Required: false
Default:
Enable the upload chunking feature,
if this is active the multipleUpload for request will be set to false.
`html`
#### numberOfChunks
Type: numberfalse
Required: 10
Default:
If the chunking mode is active this property represents the number of
chunks with which the file will be split
`html`
#### dropzoneClassName
Type: stringfalse
Required: dropzone__box
Default:
custom class for the dropzone
`html`string
#### dropzoneMessageClassName
Type: false
Required: dropzone__message--style
Default:
custom class for the dropzone message
`html`
#### dropzoneItemClassName
Type: stringfalse
Required: dropzone__item--style
Default:
custom class for the dropzone item
`html`string
#### dropzoneDetailsClassName
Type: false
Required: dropzone__details--style
Default:
custom class for the dropzone details
`html`
#### 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
* XMLHttpRequestformData
* 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``