# 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)

Choose file

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

Show Code

# Multiple files

Choose file

...

...

<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.

# Dropzone File Upload

# Example (single file with preview)

# Multiple files

...

# DropzoneFileUpload props