Introduce a list of image mime types we can support as images

E.g. TIFF will now be handled as a generic file, not image, even though it has mime prefix "image/"

src/components/CreateRoom.vue

@@ -68,7 +68,7 @@
     <interactive-auth ref="interactiveAuth" />
 
     <input id="user-avatar-picker" ref="useravatar" type="file" name="user-avatar"
-      @change="handlePickedUserAvatar($event)" accept="image/*" class="d-none" />
+      @change="handlePickedUserAvatar($event)" :accept="supportedImageTypes" class="d-none" />
 
     <v-dialog v-model="enterRoomDialog" :width="$vuetify.display.smAndUp ? '50%' : '90%'">
       <v-card>

src/components/Join.vue

@@ -114,7 +114,7 @@
     </div>
 
     <input id="room-avatar-picker" ref="avatar" type="file" name="avatar" @change="handlePickedAvatar($event)"
-      accept="image/*" class="d-none" />
+      :accept="supportedImageTypes" class="d-none" />
 
     <div class="join-lang">
       <h3 class="mb-2">{{ $t("profile.select_language") }}</h3>

src/components/Profile.vue

@@ -33,7 +33,7 @@
               type="file"
               name="avatar"
               @change="handlePickedAvatar($event)"
-              accept="image/*"
+              :accept="supportedImageTypes"
               class="d-none"
             />
           </v-avatar>

src/components/RoomAvatarPicker.vue

@@ -10,7 +10,7 @@
       type="file"
       name="roomAvatar"
       @change="handleRoomPickedAvatar($event)"
-      accept="image/*"
+      :accept="supportedImageTypes"
       class="d-none"
     />
   </v-avatar>

src/components/RoomExport.vue

@@ -384,7 +384,7 @@ export default {
 
                     const mime = blob.type;
 
-                    if (mime.startsWith("image/")) {
+                    if (util.isSupportedImageType(mime)) {
                       var extension = ".png";
                       switch (mime) {
                         case "image/jpeg":

src/components/create/CreateRoomAvatar.vue

@@ -4,7 +4,7 @@
         <v-icon class="create-room-avatar__icon default" v-else>$vuetify.icons.room_avatar_placeholder</v-icon>
         <v-icon class="create-room-avatar__camera clickable" v-if="!modelValue || !modelValue.image" @click.stop="showRoomAvatarPicker">$vuetify.icons.ic_camera</v-icon>
         <input id="room-avatar-picker" ref="roomAvatar" type="file" name="roomAvatar"
-            @change="handlePickedRoomAvatar($event)" accept="image/*" class="d-none" />
+            @change="handlePickedRoomAvatar($event)" :accept="supportedImageTypes" class="d-none" />
     </div>
 </template>
 

src/components/messages/composition/useThumbnail.ts

@@ -32,7 +32,7 @@ export const useThumbnail = (source: KeanuEvent | File | undefined) => {
   } else if (source) {
     const file = source as File;
     isVideo.value = file.type.startsWith("video/");
-    isImage.value = file.type.startsWith("image/");
+    isImage.value = utils.isSupportedImageType(file.type);
     fileName.value = file.name;
     fileSize.value = prettyBytes(file.size);
   }

src/main.js

@@ -16,6 +16,8 @@ import Vue3Sanitize from "vue-3-sanitize";
 import vuetify from './plugins/vuetify';
 import { Buffer } from 'buffer/'
 import { createApp, h } from 'vue';
+import { supportedImageTypes } from '@/plugins/utils';
+
 globalThis.Buffer = Buffer;
 
 var defaultOptions = Vue3Sanitize.defaults;
@@ -25,6 +27,9 @@ defaultOptions.allowedTags = [];
 const app = createApp({
   render: () => h(App)
 });
+app.config.globalProperties.supportedImageTypes = supportedImageTypes;
+
+
 app.use(Vue3Sanitize, defaultOptions);
 
 app.config.productionTip = false

src/models/attachmentManager.ts

@@ -77,7 +77,7 @@ export class AttachmentManager {
 
   private async prepareUpload(attachment: Attachment, room: KeanuRoom): Promise<Attachment> {
     const file = attachment.file;
-    if (file.type.startsWith("image/")) {
+    if (utils.isSupportedImageType(file.type)) {
       let url = URL.createObjectURL(file);
       attachment.src = url;
       if (attachment.src) {

src/plugins/utils.js

@@ -30,6 +30,17 @@ export const CLIENT_EVENT_MEDIA_INTERVENTION_FLAGS = "im.keanu.proof_hint";
 export const THUMBNAIL_MAX_WIDTH = 640;
 export const THUMBNAIL_MAX_HEIGHT = 640;
 
+export const supportedImageTypes = [
+  "image/bmp",
+  "image/gif",
+  "image/jpg",
+  "image/jpeg",
+  "image/png",
+  "image/svg",
+  "image/webp",
+  "image/x-icon"
+];
+
 // Install extended localized format
 dayjs.extend(localizedFormat);
 dayjs.extend(duration);
@@ -437,7 +448,7 @@ class Util {
             };
           }
 
-          if (file.type.startsWith("image/")) {
+          if (this.isSupportedImageType(file.type)) {
             msgtype = "m.image";
 
             // Generate thumbnail?
@@ -940,7 +951,7 @@ class Util {
       var reader = new FileReader();
       reader.onload = (e) => {
         const file = event.target.files[0];
-        if (file.type.startsWith("image/")) {
+        if (this.isSupportedImageType(file.type)) {
           try {
             var image = e.target.result;
 
@@ -1236,6 +1247,10 @@ class Util {
     return false;
   }
 
+  isSupportedImageType(mime) {
+    return supportedImageTypes.some(prefix => mime.startsWith(prefix));
+  }
+
   isMobileOrTabletBrowser() {
     // Regular expression to match common mobile and tablet browser user agent strings
     const mobileTabletPattern = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Tablet|Mobile|CriOS/i;