MazDropzone
MazDropzone is a standalone component to help a user upload different type of files with a beautiful design system. It works with dropzone.js and is not SSR compatible with Nuxt.JS
INFO
Before you have to import the global css files in your project, follow instructions in Getting Started
To use this component, you have to install the dropzone
dependency
bash
npm install dropzone@^5.9.3
Basic usage
Set
:options="{ autoProcessQueue: true }"
to upload automatically the files (no button needed)
vue
<template>
<ClientOnly>
<MazDropzone
ref="mazDropzoneInstance"
:options="dropzoneOptions"
@error="error"
@success="success"
@sending="loading = true"
@complete="loading = false"
/>
</ClientOnly>
<p v-if="errorMessage" style="color: red; text-align: center;">
{{ errorMessage }}
</p>
<MazBtn left-icon="arrow-up-tray" :loading="loading" @click="sendFiles">
Send Files
</MazBtn>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import MazDropzone, { MazDropzoneInstance, MazDropzoneOptions } from 'maz-ui/components/MazDropzone'
import MazBtn from 'maz-ui/components/MazBtn'
const loading = ref(false)
const mazDropzoneInstance = ref<MazDropzoneInstance>()
const errorMessage = ref<string>()
const error = ({ file, message }) => {
console.log('dropzone-error', { file, message })
errorMessage.value = message
}
const success = ({ file, response }) => {
console.log('dropzone-success', { file, response })
}
const sendFiles = () => mazDropzoneInstance.value?.processQueue()
const dropzoneOptionsBase: MazDropzoneOptions = {
url: 'https://httpbin.org/post',
headers: { 'My-Awesome-Header': 'header value' },
acceptedFiles: 'image/jpeg,image/jpg,image/png',
maxFilesize: 5,
maxFiles: 5,
maxThumbnailFilesize: 3,
autoProcessQueue: false,
autoRemoveOnError: true,
}
const translations: MazDropzoneOptions = {
dictDefaultMessage: 'Choose or drop a file',
dictFilesDescriptions: `(PNG or JPG under ${dropzoneOptionsBase.maxFilesize} MB)`,
dictFallbackMessage: 'Your browser is not supported',
dictFileTooBig: `File(s) too big (max: ${dropzoneOptionsBase.maxFilesize} MB)`,
dictInvalidFileType: `File type not supported`,
dictRemoveFile: 'Remove',
dictCancelUpload: 'Cancel upload',
dictMaxFilesExceeded: `You can not upload any more files. (max: ${dropzoneOptionsBase.maxFiles})`,
dictUploadCanceled: 'Upload canceled',
}
const dropzoneOptions: MazDropzoneOptions = {
...dropzoneOptionsBase,
...translations
}
</script>
Props, Events emitted & Methods
No props for this component
Methods |
---|
setOption |
manuallyAddFile |
removeAllFiles |
processQueue |
destroy |
disable |
enable |
accept |
addFile |
resizeImage |
cancelUpload |
getAcceptedFiles |
getRejectedFiles |
getFilesWithStatus |
getQueuedFiles |
getUploadingFiles |
getAddedFiles |
getActiveFiles |
Props, Event & Slots
Props
Prop name | Description | Type | Values | Default |
---|---|---|---|---|
options | MazDropzoneOptions | - | ||
height | number | string | - | '245px' | |
width | number | string | - | '100%' | |
noDestroyOnUnmount | boolean | - | false |
Events
Event name | Properties | Description |
---|---|---|
thumbnail | ||
error | ||
drop | ||
dragstart | ||
dragend | ||
dragenter | ||
dragover | ||
dragleave | ||
paste | ||
addedfile | ||
addedfiles | ||
removedfile | ||
success | ||
processing | ||
processingmultiple | ||
uploadprogress | ||
totaluploadprogress | ||
sending | ||
sendingmultiple | ||
canceled | ||
canceledmultiple | ||
complete | ||
completemultiple | ||
maxfilesexceeded | ||
maxfilesreached | ||
queuecomplete | ||
reset |
Slots
Name | Description | Bindings |
---|---|---|
default | ||
icon |