You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.8 KiB
97 lines
2.8 KiB
<template>
|
|
<vue-dropzone
|
|
:id="id"
|
|
:options="dropzoneOptions"
|
|
:use-custom-slot="true"
|
|
@vdropzone-removed-file="dropzoneRemovedFile"
|
|
@vdropzone-success="dropzoneSuccess"
|
|
>
|
|
<div class="dropzone-custom-content">
|
|
<h3
|
|
class="dropzone-custom-title"
|
|
:style="{color: themeColor}"
|
|
>
|
|
Drag and drop to upload content!
|
|
</h3>
|
|
<div class="subtitle">
|
|
...or click to select a file from your computer
|
|
</div>
|
|
</div>
|
|
</vue-dropzone>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import VueDropzone from 'vue2-dropzone'
|
|
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
|
|
import { Component, Prop, Vue } from 'vue-property-decorator'
|
|
import { SettingsModule } from '@/store/modules/settings'
|
|
|
|
@Component({
|
|
name: 'Dropzone',
|
|
components: {
|
|
VueDropzone
|
|
}
|
|
})
|
|
export default class extends Vue {
|
|
// You can add more Prop, see: https://www.dropzonejs.com/#configuration
|
|
@Prop({ required: true }) private id!: string
|
|
@Prop({ required: true }) private url!: string
|
|
@Prop({ default: 200 }) private thumbnailHeight!: number
|
|
@Prop({ default: 200 }) private thumbnailWidth!: number
|
|
@Prop({ default: 4 }) private maxFiles!: number
|
|
@Prop({ default: 5 }) private maxFilesize!: number // In MB
|
|
@Prop({ default: true }) private autoProcessQueue!: boolean
|
|
@Prop({ default: true }) private addRemoveLinks!: boolean
|
|
@Prop({ default: 'Drop files here to upload' }) private dictDefaultMessage!: string
|
|
@Prop({ default: 'Your broswer does not support dropzone.js' }) private dictFallbackMessage!: string
|
|
@Prop({ default: 'Remove' }) private dictRemoveFile!: string
|
|
@Prop({ default: 'Max Files Exceeded' }) private dictMaxFilesExceeded!: string
|
|
|
|
get dropzoneOptions() {
|
|
return {
|
|
url: this.url,
|
|
thumbnailWidth: this.thumbnailWidth,
|
|
thumbnailHeight: this.thumbnailHeight,
|
|
maxFiles: this.maxFiles,
|
|
maxFilesize: this.maxFilesize,
|
|
autoProcessQueue: this.autoProcessQueue,
|
|
addRemoveLinks: this.addRemoveLinks,
|
|
dictDefaultMessage: this.dictDefaultMessage,
|
|
dictFallbackMessage: this.dictFallbackMessage,
|
|
dictRemoveFile: this.dictRemoveFile,
|
|
dictMaxFilesExceeded: this.dictMaxFilesExceeded
|
|
}
|
|
}
|
|
|
|
get themeColor() {
|
|
return SettingsModule.theme
|
|
}
|
|
|
|
// You can add more Event handler, see: https://rowanwins.github.io/vue-dropzone/docs/dist/#/events
|
|
private dropzoneSuccess(file: File, response: any) {
|
|
this.$emit('dropzone-success', file, response)
|
|
}
|
|
|
|
private dropzoneRemovedFile(file: File, error: Error, xhr: XMLHttpRequest) {
|
|
this.$emit('dropzone-removed-file', file, error, xhr)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.dropzone-custom-content {
|
|
position: absolute;
|
|
top: 55%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
}
|
|
|
|
.subtitle {
|
|
color: #314b5f;
|
|
}
|
|
|
|
.dropzone {
|
|
min-height: 250px;
|
|
}
|
|
</style>
|
|
|