dropzone fixed href issue..

This commit is contained in:
Cüneyt Şentürk 2021-02-08 18:26:30 +03:00
parent 4f6d2a0435
commit 6852d83cb9

View File

@ -107,83 +107,89 @@ export default {
let preview = this.preview == 'single' ? this.$refs.previewSingle : this.$refs.previewMultiple; let preview = this.preview == 'single' ? this.$refs.previewSingle : this.$refs.previewMultiple;
if (this.configurations.maxFiles === undefined && this.multiple == false) { if (this.configurations.maxFiles === undefined && this.multiple == false) {
this.configurations.maxFiles = 1 this.configurations.maxFiles = 1;
} }
if (this.configurations.acceptedFiles === undefined) { if (this.configurations.acceptedFiles === undefined) {
this.configurations.acceptedFiles = 'image/*' this.configurations.acceptedFiles = 'image/*';
} }
let finalOptions = { let finalOptions = {
...self.configurations, ...self.configurations,
url: this.url, url: this.url,
previewsContainer: preview, previewsContainer: preview,
previewTemplate: preview.innerHTML, previewTemplate: preview.innerHTML,
dictDefaultMessage: this.textDropFile, dictDefaultMessage: this.textDropFile,
autoProcessQueue: false, autoProcessQueue: false,
init: function () { init: function () {
let dropzone = this let dropzone = this;
dropzone.on('addedfile', function (file) { dropzone.on('addedfile', function (file) {
self.files.push(file); self.files.push(file);
if (self.configurations.maxFiles == 1) { if (self.configurations.maxFiles == 1) {
self.$emit('change', file); self.$emit('change', file);
} else { } else {
self.$emit('change', self.files); self.$emit('change', self.files);
} }
}), }),
dropzone.on('removedfile', function (file) { dropzone.on('removedfile', function (file) {
let index = self.files.findIndex(f => f.name === file.name) let index = self.files.findIndex(f => f.name === file.name)
if (index !== -1) { if (index !== -1) {
self.files.splice(index, 1); self.files.splice(index, 1);
} }
self.$emit('change', self.files); self.$emit('change', self.files);
if (self.multiple) { if (self.multiple) {
this.enable(); this.enable();
} }
}), }),
dropzone.on('maxfilesexceeded', function(file) { dropzone.on('maxfilesexceeded', function(file) {
this.removeAllFiles('notCancel'); this.removeAllFiles('notCancel');
this.addFile(file); this.addFile(file);
}), }),
dropzone.on('maxfilesreached', function(file) { dropzone.on('maxfilesreached', function(file) {
if (self.multiple) { if (self.multiple) {
this.disable(); this.disable();
} }
})
setTimeout(() => {
self.attachments.forEach(async (attachment) => {
let blob = await self.getAttachmentContent(attachment.path)
let file = new File([blob], attachment.name, { type: blob.type })
dropzone.displayExistingFile(file, attachment.path, () => {
file.previewElement.querySelector("[data-dz-download]").href = attachment.downloadPath
file.previewElement.querySelector("[data-dz-download]").classList.remove("d-none")
})
}) })
if (self.preview == 'single' && self.attachments.length == 1) if (self.attachments.length) {
document.querySelector("#dropzone").classList.add("dz-max-files-reached"); setTimeout(() => {
}, 750) self.attachments.forEach(async (attachment) => {
} let blob = await self.getAttachmentContent(attachment.path);
let file = new File([blob], attachment.name, { type: blob.type });
dropzone.displayExistingFile(file, attachment.path, () => {
if (attachment.downloadPath) {
file.previewElement.querySelector("[data-dz-download]").href = attachment.downloadPath;
file.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); this.dropzone = new Dropzone(this.$el, finalOptions);
preview.innerHTML = ''; preview.innerHTML = '';
}, },
async getAttachmentContent(imageUrl) { async getAttachmentContent(imageUrl) {
return await axios.get(imageUrl, { responseType: 'blob' }).then(function (response) { return await axios.get(imageUrl, { responseType: 'blob' }).then(function (response) {
return response.data return response.data;
}); });
} }
}, },