icms-dropzone
v2.0.2
Published
A wrapper around Dropzone.js for Vue 2
Downloads
3
Readme
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 [email protected]
Usage
- 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