From 676b037d91fc9e19f49d788017482d7c43135ced Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 3 Jun 2024 18:43:05 +0200
Subject: [PATCH] Display error message if not an image in reports

---
 .../Dataset/DatasetAsImage/DatasetAsImage.vue         | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/client/src/components/Dataset/DatasetAsImage/DatasetAsImage.vue b/client/src/components/Dataset/DatasetAsImage/DatasetAsImage.vue
index 40b47093e435..5f9f2f50f39b 100644
--- a/client/src/components/Dataset/DatasetAsImage/DatasetAsImage.vue
+++ b/client/src/components/Dataset/DatasetAsImage/DatasetAsImage.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computedAsync } from "@vueuse/core";
 import { computed } from "vue";
 
 import { type PathDestination, useDatasetPathDestination } from "@/composables/datasetPathDestination";
@@ -24,6 +25,15 @@ const imageUrl = computed(() => {
 
     return pathDestination.value?.fileLink;
 });
+
+const isImage = computedAsync(async () => {
+    if (!imageUrl.value) {
+        return null;
+    }
+    const res = await fetch(imageUrl.value);
+    const buff = await res.blob();
+    return buff.type.startsWith("image/");
+}, null);
 </script>
 
 <template>
@@ -31,6 +41,7 @@ const imageUrl = computed(() => {
         <div v-if="imageUrl" class="w-100 p-2">
             <b-card nobody body-class="p-1">
                 <b-img :src="imageUrl" fluid />
+                <span v-if="!isImage" class="text-danger">This dataset does not appear to be an image.</span>
             </b-card>
         </div>
         <div v-else>