2.0.2 • Published 7 years ago
icms-dropzone v2.0.2
vue-dropzone
A Vue component for file uploads, powered by Dropzone.js. Check out the demo.
Install
// For Vue.js 2.0+
npm install vue-dropzone^2.0.0
// For Vue.js 1.0+
npm install vue-dropzone@1.0.0Usage
- Import the module
- Register it as a component as you would any other Vue component
- Use it within your template
Example
<template>
<div id="app">
<p>Welcome to your Vue.js app!</p>
<dropzone id="myVueDropzone" url="https://httpbin.org/post" v-on:vdropzone-success="showSuccess"></dropzone>
</div>
</template>
<script>
import Dropzone from 'vue-dropzone/lib/Dropzone'
export default {
name: 'MainApp',
components: {
Dropzone
},
methods: {
'showSuccess': function (file) {
console.log('A file was successfully uploaded')
}
}
}
</script>Props
Many of these props are inherited from dropzone configuration so see their doco for further details.
| Prop Name | Type | Description |
|---|---|---|
| id | String | A string by which to identify the component, can be anything. Required |
| url | String | Url to post the upload to. Required |
| clickable | Boolean | Whether the dropzone area is clickable, if false then users can only drag items on to the area. |
| acceptedFileTypes | String | A comma separated string of accepted file types eg 'image/*,application/pdf,.psd' . |
| thumbnailHeight | Number | The height of thumbnails in pixels. |
| thumbnailWidth | Number | The width of thumbnails in pixels. |
| showRemoveLink | Boolean | Whether the Remove link is shown on items. |
| maxFileSizeInMB | Number | The maximum file size for a single upload in MB. |
| maxNumberOfFiles | Number | The maximum number of files to allow the user to upload. |
| autoProcessQueue | Boolean | Whether the files are automatically uploaded or not. |
| useCustomDropzoneOptions | Boolean | If you want to define your own Dropzone config set this to true and define a dropzoneOptions. |
| dropzoneOptions | Object | A custom set of rules to define your dropzone object, use anything available in the dropzone config. |
Events
Events to send to the component.
| Event Name | Description |
|---|---|
| removeAllFiles() | Empties the dropzone area. |
| processQueue() | Uploads the files, required if autoProcessQueue is set to false. |
Events emitted by the component to the parent.
| Event Name | Description |
|---|---|
| vdropzone-fileAdded(file) | File added to the dropzone. |
| vdropzone-success(file, response) | File successfully uploaded. |
| vdropzone-error(file) | File uploaded encountered an error. |
| vdropzone-removedFile(file, error, xhr) | A file was removed from the dropzone. |
Development
# install dependencies
npm install
# serve example at localhost:8080
npm run dev
# build any changes made
npm run build