Dropzone File Upload

DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.


We've provided a simple wrapper component with v-model support over the Dropzone

Initialization:

import DropzoneFileUpload from '@/components/Inputs/DropzoneFileUpload'

export default {
  components: {
    DropzoneFileUpload
  }
}

Example (single file with preview)

<template>
  <dropzone-file-upload v-model="fileSingle"></dropzone-file-upload>
</template>
<script>
export default {
   data(){
     return {
       fileSingle: []
     }
   }
}
</script>

Show Code

Multiple files

  • ...

    ...

<template>
  <dropzone-file-upload v-model="fileMultiple" multiple></dropzone-file-upload>
</template>
<script>
export default {
   data(){
     return {
       fileMultiple: []
     }
   }
}
</script>

Show Code

TIP

Dropzone plugin requires an url where you should upload your files. If you don't provide an url, it will throw an error, yet you can still have access to the local files.

DropzoneFileUpload props