- image thumbnail fix in s3

- svg thumbnail fix

resources/js/components/FilePreview/FilePreviewMedia.vue

@@ -23,7 +23,7 @@
             <div class="flex h-full w-full items-center justify-center">
                 <Audio v-if="isAudio" :file="currentFile" />
                 <Video v-if="isVideo" :file="currentFile" class="mx-auto max-h-full max-w-[1080px] self-center" />
-                <ImageFile v-if="isImage" :file="currentFile" class="mx-auto max-h-[100%] max-w-[100%] self-center" />
+                <ImageFile v-if="isImage" :file="currentFile" class="mx-auto max-h-[100%] max-w-[100%] self-center" :class="{'file-shadow': !$isMobile()}" id="printable-file" />
             </div>
         </div>
 

resources/js/components/FilePreview/Media/ImageFile.vue

@@ -1,11 +1,13 @@
 <template>
-    <img id="printable-file" class="file" :class="{'file-shadow': !$isMobile()}" :src="src" @error="replaceByOriginal" />
+    <img class="file" :src="src" @error="replaceByOriginal" alt="" />
 </template>
 
 <script>
 export default {
     name: 'ImageFile',
-    props: ['file'],
+    props: [
+		'file'
+	],
 	watch: {
 		'file': function () {
 			this.getSrc()
@@ -21,9 +23,9 @@ export default {
 			this.src = this.file.data.attributes.file_url
 		},
 		getSrc() {
-			let windowWidth = window.innerWidth
-
-			if (windowWidth > 1280) {
+			if (this.file.data.attributes.mimetype === 'svg') {
+				this.src = this.file.data.attributes.file_url
+			} else if (window.innerWidth > 1280) {
 				this.src = this.file.data.attributes.thumbnail.xl
 			} else {
 				this.src = this.file.data.attributes.thumbnail.lg

resources/js/components/FilesView/ItemGrid.vue

@@ -64,9 +64,10 @@
 
                     <img
                         class="h-full w-full rounded-lg object-cover shadow-lg"
-                        :src="entry.data.attributes.thumbnail.sm"
+                        :src="imageSrc"
 						alt=""
                         loading="lazy"
+						@error="replaceByOriginal"
                     />
                 </div>
             </div>
@@ -157,6 +158,7 @@ export default {
         return {
             mobileMultiSelect: false,
             itemName: undefined,
+			imageSrc: undefined,
         }
     },
     computed: {
@@ -214,6 +216,14 @@ export default {
         },
     },
     methods: {
+		getImageSrc() {
+			this.imageSrc = this.entry.data.attributes.mimetype === 'svg'
+				? this.entry.data.attributes.file_url
+				: this.entry.data.attributes.thumbnail.xs
+		},
+		replaceByOriginal() {
+			this.imageSrc = this.entry.data.attributes.file_url
+		},
         showItemActions() {
             this.$store.commit('CLIPBOARD_CLEAR')
             this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entry)
@@ -248,6 +258,8 @@ export default {
                 document.execCommand('selectAll')
             }
         })
+
+		this.getImageSrc()
     },
 }
 </script>

resources/js/components/FilesView/ItemList.vue

@@ -43,9 +43,10 @@
             <img
                 v-if="isImage && entry.data.attributes.thumbnail"
                 class="ml-0.5 h-12 w-12 rounded object-cover"
-                :src="entry.data.attributes.thumbnail.xs"
+                :src="imageSrc"
 				alt=""
                 loading="lazy"
+				@error="replaceByOriginal"
             />
         </div>
 
@@ -140,7 +141,8 @@ export default {
             itemName: undefined,
             isSelected: false,
 			isChecked: false,
-        }
+			imageSrc: undefined,
+		}
     },
     computed: {
         ...mapGetters(['isMultiSelectMode', 'clipboard', 'user']),
@@ -190,6 +192,14 @@ export default {
         },
     },
     methods: {
+		getImageSrc() {
+			this.imageSrc = this.entry.data.attributes.mimetype === 'svg'
+				? this.entry.data.attributes.file_url
+				: this.entry.data.attributes.thumbnail.xs
+		},
+		replaceByOriginal() {
+			this.imageSrc = this.entry.data.attributes.file_url
+		},
         showItemActions() {
             this.$store.commit('CLIPBOARD_CLEAR')
             this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entry)
@@ -226,6 +236,8 @@ export default {
                 document.execCommand('selectAll')
             }
         })
-    },
+
+		this.getImageSrc()
+	},
 }
 </script>

resources/js/components/Others/FilePreviewDetail.vue

@@ -1,7 +1,13 @@
 <template>
     <div v-if="canBePreview" class="mb-4 block w-full">
         <!--Image-->
-		<ImageFile v-if="singleFile.data.type === 'image'" :file="singleFile" class="w-full overflow-hidden rounded-lg object-cover shadow-lg" />
+		<img
+			v-if="singleFile.data.type === 'image'"
+			:src="imageSrc"
+			class="w-full overflow-hidden rounded-lg object-cover shadow-lg"
+			@error="replaceByOriginal"
+			alt=""
+		>
 
         <!--Audio-->
         <audio
@@ -51,7 +57,29 @@ export default {
             if (val.data.type === 'video') {
                 this.$refs.video.load()
             }
+            if (val.data.type === 'image') {
+				this.getImageSrc()
+            }
         },
     },
+	data() {
+		return {
+			imageSrc: undefined,
+		}
+	},
+	methods: {
+		replaceByOriginal() {
+			this.imageSrc = this.singleFile.data.attributes.file_url
+		},
+		getImageSrc() {
+			this.imageSrc = this.singleFile.data.attributes.mimetype === 'svg'
+				? this.singleFile.data.attributes.file_url
+				: this.singleFile.data.attributes.thumbnail.lg
+		},
+	},
+	created() {
+		if (this.singleFile.data.type === 'image')
+			this.getImageSrc()
+	}
 }
 </script>