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

npm install dropzone@^5.9.3

Basic usage

Set :options="{ autoProcessQueue: true }" to upload automatically the files (no button needed)

<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(s) too big (max: ${dropzoneOptionsBase.maxFilesize} MB)`,
    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