dropzone-vue-next

Vue 3 Library Component for seamless file upload.

:rocket: Features

• Typescript support
• 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

$ pnpm add dropzone-vue-next
$ npm install dropzone-vue-next

Register the component

import DropZone from 'dropzone-vue-next'
import 'dropzone-vue-next/dist/style.css'

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

Now your component inside a code:

<template>
    <DropZone :max-files="10000000000" :upload-on-drop="false" :multiple-upload="true" :accepted-files="['image/*']" :parallel-upload="3">
        <template #default="{ files }">
            <div v-for="(item, id) in files" :key="id">
                <img :src="item.thumbnail" alt="thumbnail" width="100" />
                {{ item.file.name }}
            </div>
        </template>
    </DropZone>
</template>

Props

url

Type: String Required: false Default: window.localtion

Upload url

<DropZone url="http://endpoint/upload"></DropZone>

method

Type: String Required: false Default: POST

Upload method can be POST or PUT

<DropZone method="PUT"></DropZone>

headers

Type: Object Required: false Default: {}

Send additional headers to the server.

<DropZone :headers="{"header1": "value"}">

param-name

Type: String Required: false Default: file

Formdata key for file upload request

<DropZone param-name="test"></DropZone>

xhr-timeout

Type: number Required: false Default: 60000

The timeout for the XHR requests in milliseconds

<DropZone :xhr-timeout="500"></DropZone>

with-credentials

Type: boolean Required: false Default: false

with-credentials option for XHR requests

<DropZone :with-credentials="true"></DropZone>

upload-on-drop

Type: boolean Required: false Default: true

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

<DropZone :upload-on-drop="true"></DropZone>

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

<DropZone ref="dropzone" :upload-on-drop="true"></DropZone>

dropzone.value.processQueue()

retry-on-error

Type: boolean Required: false Default: false

Retry an upload if it fail.

<DropZone :retry-on-error="true"></DropZone>

multiple-upload

Type: boolean Required: false Default: false

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

<DropZone :multiple-upload="true"></DropZone>

parallel-upload

Type: number Required: false Default: 3

Parallel request upload to be processed

<DropZone :parallel-upload="6"></DropZone>

max-files

Type: number Required: false Default: null

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

<DropZone :max-files="6"></DropZone>

max-file-size

Type: number Required: false Default: 1000000

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

<DropZone :max-file-size="600000000"></DropZone>

clickable

Type: boolean Required: false Default: true

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

<DropZone :clickable="false"></DropZone>

accepted-files

Type: string | array Required: false Default: null

Array that contains the accepted file types, if it's null all files are accepted

<DropZone :accepted-files="['exe']"></DropZone>

chunking

Type: boolean Required: false Default: false

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

<DropZone :chunking="true"></DropZone>

number-of-chunks

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

<DropZone :number-of-chunks="5"></DropZone>

Events

config-update

Parameters:

• config config object with the new values

Called when a props is changed

<DropZone @config-update="onUpdateConfig"></DropZone>

change

Parameters:

• item {id: 'fileid', file: File}

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

<DropZone @change="onFileAdd"></DropZone>

remove

Parameters:

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

Called when a file is removed.

<DropZone @remove="onFileRemove"></DropZone>

uploaded

Parameters:

• items [{file: File}]

Called when a file or files are uploaded.

<DropZone @uploaded="uploaded"></DropZone>

upload-error

Parameters:

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

Called when a file or files uploads fail.

<DropZone @upload-error="onErrorUpload"></DropZone>

sending

Parameters:

• files Array(File)
• xhr XMLHttpRequest
• formData FormData

Called when a file is going to be uploaded.

<DropZone @sending="sending"></DropZone>

error

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

<DropZone @error="onError"></DropZone>

Thanks ❤️

Project is a fork of https://github.com/darknessnerd/drop-zone by @darknessnerd