Add file image as fallback preview

frontend/src/components/misc/Icon.ts

@@ -29,6 +29,7 @@ import {
 	faExclamation,
 	faEye,
 	faEyeSlash,
+	faFileImage,
 	faFillDrip,
 	faFilter,
 	faForward,
@@ -81,7 +82,6 @@ import {
 	faCheckSquare,
 	faClock,
 	faComments,
-	faFileImage,
 	faSave,
 	faSquareCheck,
 	faStar,

frontend/src/components/tasks/partials/attachments.vue

@@ -35,7 +35,6 @@
 			>
 				<div class="preview-column">
 					<FilePreview
-						v-if="canPreview(a)"
 						class="attachment-preview"
 						:model-value="a"
 					/>

frontend/src/components/tasks/partials/file-preview.vue

@@ -1,14 +1,21 @@
 <template>
 	<img
+		v-if="blobUrl"
 		:src="blobUrl"
 		alt="Attachment preview"
 	>
+	<icon
+		v-else
+		size="6x"
+		icon="file-image"
+	/>
 </template>
 
 <script setup lang="ts">
 import {type PropType, ref, shallowReactive, watchEffect} from 'vue'
 import AttachmentService from '@/services/attachment'
-import type { IAttachment } from '@/modelTypes/IAttachment'
+import type {IAttachment} from '@/modelTypes/IAttachment'
+import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
 
 const props = defineProps({
 	modelValue: {
@@ -21,10 +28,14 @@ const attachmentService = shallowReactive(new AttachmentService())
 const blobUrl = ref<string | undefined>(undefined)
 
 watchEffect(async () => {
-	if (props.modelValue) {
+	if (props.modelValue && canPreview(props.modelValue)) {
 		blobUrl.value = await attachmentService.getBlobUrl(props.modelValue)
 	}
 })
+
+function canPreview(attachment: IAttachment): boolean {
+	return SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.endsWith(suffix))
+}
 </script>
 
 <style scoped lang="scss">