From cf2726441c9b8d90ce5d1e5d2148c38d85e796a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=BCneyt=20=C5=9Eent=C3=BCrk?= <cneytsenturk@gmail.com>
Date: Tue, 9 Feb 2021 11:47:30 +0300
Subject: [PATCH] File group component and view changes..

---
 .../AkauntingDropzoneFileUpload.vue           | 59 ++++++++++++++-----
 .../views/partials/form/file_group.blade.php  | 21 +++++--
 2 files changed, 61 insertions(+), 19 deletions(-)

diff --git a/resources/assets/js/components/AkauntingDropzoneFileUpload.vue b/resources/assets/js/components/AkauntingDropzoneFileUpload.vue
index 8007f2663..a756602f1 100644
--- a/resources/assets/js/components/AkauntingDropzoneFileUpload.vue
+++ b/resources/assets/js/components/AkauntingDropzoneFileUpload.vue
@@ -11,6 +11,10 @@
         <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 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>
 
@@ -20,6 +24,10 @@
                     <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>
 
@@ -133,6 +141,24 @@ export default {
                         } else {
                             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) {
@@ -163,15 +189,26 @@ export default {
                     if (self.attachments.length) {
                         setTimeout(() => {
                             self.attachments.forEach(async (attachment) => {
-                                let blob = await self.getAttachmentContent(attachment.path);
-                                let file = new File([blob], attachment.name, { type: blob.type });
+                                var mockFile = {
+                                    id: attachment.id,
+                                    name: attachment.name,
+                                    size: attachment.size,
+                                    type: attachment.type,
+                                    download: attachment.downloadPath,
+                                };
 
-                                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");
-                                    }
-                                });
+                                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) {
@@ -186,12 +223,6 @@ export default {
 
             preview.innerHTML = '';
         },
-
-        async getAttachmentContent(imageUrl) {
-            return await axios.get(imageUrl, { responseType: 'blob' }).then(function (response) {
-                return response.data;
-            });
-        }
     },
 
     async mounted() {
diff --git a/resources/views/partials/form/file_group.blade.php b/resources/views/partials/form/file_group.blade.php
index 7591b9a36..bea74d73f 100644
--- a/resources/views/partials/form/file_group.blade.php
+++ b/resources/views/partials/form/file_group.blade.php
@@ -45,17 +45,24 @@
                         @foreach($value as $attachment)
                             @php
                                 $attachments[] = [
+                                    'id' => $attachment->id,
                                     'name' => $attachment->filename . '.' . $attachment->extension, 
-                                    'path' => route('uploads.get', $attachment->id), 
-                                    'downloadPath' => route('uploads.download', $attachment->id)
+                                    'path' => route('uploads.get', $attachment->id),
+                                    'type' => $attachment->mime_type,
+                                    'size' => $attachment->size,
+                                    'downloadPath' => route('uploads.download', $attachment->id),
                                 ];
                             @endphp
                         @endforeach
                     @elseif ($value instanceof \Plank\Mediable\Media)
                         @php
                             $attachments[] = [
+                                'id' => $attachment->id,
                                 '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
                     @else
@@ -63,12 +70,16 @@
                             $attachment = \Plank\Mediable\Media::find($value);
 
                             $attachments[] = [
+                                'id' => $attachment->id,
                                 '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
                     @endif
-                
+
                 :attachments="{{ json_encode($attachments) }}"
                 @endif