File group component and view changes..

This commit is contained in:
Cüneyt Şentürk 2021-02-09 11:47:30 +03:00
parent 6852d83cb9
commit cf2726441c
2 changed files with 61 additions and 19 deletions

View File

@ -11,6 +11,10 @@
<div v-if="preview == 'single'" class="dz-preview dz-preview-single" :class="previewClasses" ref="previewSingle"> <div v-if="preview == 'single'" class="dz-preview dz-preview-single" :class="previewClasses" ref="previewSingle">
<div class="dz-preview-cover"> <div class="dz-preview-cover">
<img class="dz-preview-img" data-dz-thumbnail> <img class="dz-preview-img" 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> </div>
@ -20,6 +24,10 @@
<div class="col-auto"> <div class="col-auto">
<div class="avatar"> <div class="avatar">
<img class="avatar-img rounded" data-dz-thumbnail> <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> </div>
@ -133,6 +141,24 @@ export default {
} else { } else {
self.$emit('change', self.files); self.$emit('change', self.files);
} }
if (file.type.indexOf("image") == -1) {
var ext = file.name.split('.').pop();
if (ext == "pdf") {
file.previewElement.querySelector("[data-dz-thumbnail]").classList.add("d-none");
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]").classList.add("d-none");
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]").classList.add("d-none");
file.previewElement.querySelector("[data-dz-thumbnail-excel]").classList.remove("d-none");
} else {
file.previewElement.querySelector("[data-dz-thumbnail]").classList.add("d-none");
file.previewElement.querySelector("[data-dz-thumbnail-image]").classList.remove("d-none");
}
}
}), }),
dropzone.on('removedfile', function (file) { dropzone.on('removedfile', function (file) {
@ -163,15 +189,26 @@ export default {
if (self.attachments.length) { if (self.attachments.length) {
setTimeout(() => { setTimeout(() => {
self.attachments.forEach(async (attachment) => { self.attachments.forEach(async (attachment) => {
let blob = await self.getAttachmentContent(attachment.path); var mockFile = {
let file = new File([blob], attachment.name, { type: blob.type }); id: attachment.id,
name: attachment.name,
size: attachment.size,
type: attachment.type,
download: attachment.downloadPath,
};
dropzone.displayExistingFile(file, attachment.path, () => { dropzone.emit("addedfile", mockFile);
if (attachment.downloadPath) { dropzone.options.thumbnail.call(dropzone, mockFile, attachment.path);
file.previewElement.querySelector("[data-dz-download]").href = attachment.downloadPath;
file.previewElement.querySelector("[data-dz-download]").classList.remove("d-none"); // 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) { if (self.preview == 'single' && self.attachments.length == 1) {
@ -186,12 +223,6 @@ export default {
preview.innerHTML = ''; preview.innerHTML = '';
}, },
async getAttachmentContent(imageUrl) {
return await axios.get(imageUrl, { responseType: 'blob' }).then(function (response) {
return response.data;
});
}
}, },
async mounted() { async mounted() {

View File

@ -45,17 +45,24 @@
@foreach($value as $attachment) @foreach($value as $attachment)
@php @php
$attachments[] = [ $attachments[] = [
'id' => $attachment->id,
'name' => $attachment->filename . '.' . $attachment->extension, 'name' => $attachment->filename . '.' . $attachment->extension,
'path' => route('uploads.get', $attachment->id), 'path' => route('uploads.get', $attachment->id),
'downloadPath' => route('uploads.download', $attachment->id) 'type' => $attachment->mime_type,
'size' => $attachment->size,
'downloadPath' => route('uploads.download', $attachment->id),
]; ];
@endphp @endphp
@endforeach @endforeach
@elseif ($value instanceof \Plank\Mediable\Media) @elseif ($value instanceof \Plank\Mediable\Media)
@php @php
$attachments[] = [ $attachments[] = [
'id' => $attachment->id,
'name' => $value->filename . '.' . $value->extension, 'name' => $value->filename . '.' . $value->extension,
'path' => route('uploads.get', $value->id) 'path' => route('uploads.get', $value->id),
'type' => $attachment->mime_type,
'size' => $attachment->size,
'downloadPath' => false,
]; ];
@endphp @endphp
@else @else
@ -63,8 +70,12 @@
$attachment = \Plank\Mediable\Media::find($value); $attachment = \Plank\Mediable\Media::find($value);
$attachments[] = [ $attachments[] = [
'id' => $attachment->id,
'name' => $attachment->filename . '.' . $attachment->extension, 'name' => $attachment->filename . '.' . $attachment->extension,
'path' => route('uploads.get', $attachment->id) 'path' => route('uploads.get', $attachment->id),
'type' => $attachment->mime_type,
'size' => $attachment->size,
'downloadPath' => false,
]; ];
@endphp @endphp
@endif @endif