DropzoneFileUpload.vue component is adjusted

This commit is contained in:
Sevan Nerse 2021-01-17 21:20:40 +03:00
parent a0dcfa90b5
commit 6f8ebf91e8

View File

@ -81,6 +81,7 @@
Dropzone.autoDiscover = false Dropzone.autoDiscover = false
let preview = this.isPreviewSingle ? this.$refs.previewSingle : this.$refs.previewMultiple; let preview = this.isPreviewSingle ? this.$refs.previewSingle : this.$refs.previewMultiple;
let self = this let self = this
let finalOptions = { let finalOptions = {
...this.options, ...this.options,
url: this.url, url: this.url,
@ -88,29 +89,41 @@
thumbnailHeight: null, thumbnailHeight: null,
previewsContainer: preview, previewsContainer: preview,
previewTemplate: preview.innerHTML, previewTemplate: preview.innerHTML,
maxFiles: (!this.multiple) ? 1 : null,
init: function () { init: function () {
this.on("addedfile", function (file) { this.on("addedfile", function (file) {
self.currentFile = file; self.files.push(file)
if (self.options.maxFiles == 1) {
self.$emit('change', file)
} else {
self.$emit('change', this.files)
}
}),
this.on("maxfilesexceeded", function(file) {
this.removeAllFiles('notCancel')
this.addFile(file)
}) })
} }
} }
this.dropzone = new Dropzone(this.$el, finalOptions) this.dropzone = new Dropzone(this.$el, finalOptions)
preview.innerHTML = '' preview.innerHTML = ''
let evtList = ['drop', 'dragstart', 'dragend', 'dragenter', 'dragover', 'addedfile', 'removedfile', 'thumbnail', 'error', 'processing', 'uploadprogress', 'sending', 'success', 'complete', 'canceled', 'maxfilesreached', 'maxfilesexceeded', 'processingmultiple', 'sendingmultiple', 'successmultiple', 'completemultiple', 'canceledmultiple', 'totaluploadprogress', 'reset', 'queuecomplete'] let evtList = ['drop', 'dragstart', 'dragend', 'dragenter', 'dragover', 'addedfile', 'removedfile', 'thumbnail', 'error', 'processing', 'uploadprogress', 'sending', 'success', 'complete', 'canceled', 'maxfilesreached', 'maxfilesexceeded', 'processingmultiple', 'sendingmultiple', 'successmultiple', 'completemultiple', 'canceledmultiple', 'totaluploadprogress', 'reset', 'queuecomplete']
evtList.forEach(evt => { evtList.forEach(evt => {
this.dropzone.on(evt, (data) => { this.dropzone.on(evt, (data) => {
this.$emit(evt, data); this.$emit(evt, data);
if (evt === 'addedfile') { if (evt === 'removedfile') {
this.files.push(data)
this.$emit('change', this.files);
} else if (evt === 'removedfile') {
let index = this.files.findIndex(f => f.upload.uuid === data.upload.uuid) let index = this.files.findIndex(f => f.upload.uuid === data.upload.uuid)
if (index !== -1) { if (index !== -1) {
this.files.splice(index, 1); this.files.splice(index, 1);
} }
this.$emit('change', this.files); this.$emit('change', this.files);
} }
}) })
}) })