237 lines
9.1 KiB
Vue
237 lines
9.1 KiB
Vue
<template>
|
|
<div id="dropzone" class="dropzone mb-3 dz-clickable" :class="[preview == 'single' ? 'dropzone-single': 'dropzone-multiple']">
|
|
<div class="fallback">
|
|
<div class="custom-file">
|
|
<input type="file" class="custom-file-input" :id="'projectCoverUploads' + _uid" :multiple="multiple">
|
|
|
|
<label class="custom-file-label" :for="'projectCoverUploads' + _uid">{{ textChooseFile }}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="preview == 'single'" class="dz-preview dz-preview-single" :class="previewClasses" ref="previewSingle">
|
|
<div class="dz-preview-cover">
|
|
<img class="dz-preview-img" data-dz-thumbnail>
|
|
<i class="fas fa-file-image display-3 fa-2x mt-2 d-none" data-dz-thumbnail-image></i>
|
|
<i class="far fa-file-pdf display-3 fa-2x mt-2 d-none" data-dz-thumbnail-pdf></i>
|
|
<i class="far fa-file-word fa-2x mt-2 d-none" data-dz-thumbnail-word></i>
|
|
<i class="far fa-file-excel fa-2x mt-2 d-none" data-dz-thumbnail-excel></i>
|
|
<span class="mb-1 d-none" data-dz-name>...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<ul v-else class="dz-preview dz-preview-multiple list-group list-group-lg list-group-flush" :class="previewClasses" ref="previewMultiple">
|
|
<li class="list-group-item px-0">
|
|
<div class="row align-items-center">
|
|
<div class="col-auto">
|
|
<div class="avatar">
|
|
<img class="avatar-img rounded" data-dz-thumbnail>
|
|
<i class="fas fa-file-image display-3 d-none" data-dz-thumbnail-image></i>
|
|
<i class="far fa-file-pdf display-3 d-none" data-dz-thumbnail-pdf></i>
|
|
<i class="far fa-file-word d-none" data-dz-thumbnail-word></i>
|
|
<i class="far fa-file-excel d-none" data-dz-thumbnail-excel></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col ml--3">
|
|
<h4 class="mb-1" data-dz-name>...</h4>
|
|
|
|
<p class="small text-muted mb-0" data-dz-size>...</p>
|
|
</div>
|
|
|
|
<div class="col-auto">
|
|
<button data-dz-remove="true" class="btn btn-danger btn-sm">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
<a href="#" type="button" class="btn btn-sm btn-info text-white d-none" data-dz-download>
|
|
<i class="fas fa-file-download"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Dropzone from 'dropzone';
|
|
|
|
Dropzone.autoDiscover = false;
|
|
|
|
export default {
|
|
name: 'akaunting-dropzone-file-upload',
|
|
|
|
props: {
|
|
textDropFile: {
|
|
type: String,
|
|
default: 'Drop files here to upload',
|
|
description: 'Drop file text'
|
|
},
|
|
textChooseFile: {
|
|
type: String,
|
|
default: 'Choose File',
|
|
description: 'Choose file text'
|
|
},
|
|
options: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
value: [String, Object, Array, File],
|
|
url: {
|
|
type: String,
|
|
default: 'http:'
|
|
},
|
|
multiple: {
|
|
type: Boolean,
|
|
default: false,
|
|
description: 'Multiple file Upload'
|
|
},
|
|
previewClasses: [String, Object, Array],
|
|
preview: {
|
|
type: String,
|
|
default: function () {
|
|
return this.multiple ? 'multiple' : 'single'
|
|
},
|
|
},
|
|
attachments: {
|
|
type: Array,
|
|
default: () => ([])
|
|
},
|
|
},
|
|
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change'
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
files: [],
|
|
configurations: this.options,
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
async initDropzone() {
|
|
let self = this;
|
|
let preview = this.preview == 'single' ? this.$refs.previewSingle : this.$refs.previewMultiple;
|
|
|
|
if (this.configurations.maxFiles === undefined && this.multiple == false) {
|
|
this.configurations.maxFiles = 1;
|
|
}
|
|
|
|
if (this.configurations.acceptedFiles === undefined) {
|
|
this.configurations.acceptedFiles = 'image/*';
|
|
}
|
|
|
|
let finalOptions = {
|
|
...self.configurations,
|
|
url: this.url,
|
|
previewsContainer: preview,
|
|
previewTemplate: preview.innerHTML,
|
|
dictDefaultMessage: this.textDropFile,
|
|
autoProcessQueue: false,
|
|
|
|
init: function () {
|
|
let dropzone = this;
|
|
|
|
dropzone.on('addedfile', function (file) {
|
|
self.files.push(file);
|
|
|
|
if (self.configurations.maxFiles == 1) {
|
|
self.$emit('change', file);
|
|
} else {
|
|
self.$emit('change', self.files);
|
|
}
|
|
|
|
if (file.type.indexOf("image") == -1) {
|
|
let ext = file.name.split('.').pop();
|
|
|
|
file.previewElement.querySelector("[data-dz-thumbnail]").classList.add("d-none");
|
|
file.previewElement.querySelector("[data-dz-name]").classList.remove("d-none");
|
|
|
|
if (ext == "pdf") {
|
|
file.previewElement.querySelector("[data-dz-thumbnail-pdf]").classList.remove("d-none");
|
|
} else if ((ext.indexOf("doc") != -1) || (ext.indexOf("docx") != -1)) {
|
|
file.previewElement.querySelector("[data-dz-thumbnail-word]").classList.remove("d-none");
|
|
} else if ((ext.indexOf("xls") != -1) || (ext.indexOf("xlsx") != -1)) {
|
|
file.previewElement.querySelector("[data-dz-thumbnail-excel]").classList.remove("d-none");
|
|
} else {
|
|
file.previewElement.querySelector("[data-dz-thumbnail-image]").classList.remove("d-none");
|
|
}
|
|
}
|
|
}),
|
|
|
|
dropzone.on('removedfile', function (file) {
|
|
let index = self.files.findIndex(f => f.name === file.name)
|
|
|
|
if (index !== -1) {
|
|
self.files.splice(index, 1);
|
|
}
|
|
|
|
self.$emit('change', self.files);
|
|
|
|
if (self.multiple) {
|
|
this.enable();
|
|
}
|
|
}),
|
|
|
|
dropzone.on('maxfilesexceeded', function(file) {
|
|
this.removeAllFiles('notCancel');
|
|
this.addFile(file);
|
|
}),
|
|
|
|
dropzone.on('maxfilesreached', function(file) {
|
|
if (self.multiple) {
|
|
this.disable();
|
|
}
|
|
})
|
|
|
|
if (self.attachments.length) {
|
|
setTimeout(() => {
|
|
self.attachments.forEach(async (attachment) => {
|
|
var mockFile = {
|
|
id: attachment.id,
|
|
name: attachment.name,
|
|
size: attachment.size,
|
|
type: attachment.type,
|
|
download: attachment.downloadPath,
|
|
dropzone: 'edit',
|
|
};
|
|
|
|
dropzone.emit("addedfile", mockFile);
|
|
dropzone.options.thumbnail.call(dropzone, mockFile, attachment.path);
|
|
|
|
// Make sure that there is no progress bar, etc...
|
|
dropzone.emit("complete", mockFile);
|
|
});
|
|
|
|
self.files.forEach(async (attachment) => {
|
|
if (attachment.download) {
|
|
attachment.previewElement.querySelector("[data-dz-download]").href = attachment.download;
|
|
attachment.previewElement.querySelector("[data-dz-download]").classList.remove("d-none");
|
|
}
|
|
});
|
|
|
|
if (self.preview == 'single' && self.attachments.length == 1) {
|
|
document.querySelector("#dropzone").classList.add("dz-max-files-reached");
|
|
}
|
|
}, 100);
|
|
}
|
|
}
|
|
};
|
|
|
|
this.dropzone = new Dropzone(this.$el, finalOptions);
|
|
|
|
preview.innerHTML = '';
|
|
},
|
|
},
|
|
|
|
async mounted() {
|
|
this.initDropzone();
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|