chore(front): add file-type and heic-to dependencies, and update FileIcon component to support file type detection

front/components/FileIcon/Index.vue

@@ -3,6 +3,8 @@ import { cx } from 'class-variance-authority'
 import FileIcon from './File.vue'
 import ImageIcon from './Image.vue'
 import VideoIcon from './Video.vue'
+import { fileTypeFromBuffer } from 'file-type'
+
 export type filePreview = {
     type: string
     name: string
@@ -20,8 +22,19 @@ const props = withDefaults(
     }
 )
 const isFile = computed(() => props?.file instanceof File)
-const isImage = computed(() => isFile.value && props?.file?.type?.startsWith('image/'))
-const isVideo = computed(() => isFile.value && props?.file?.type?.startsWith('video/'))
+const { state: fileType } = useAsyncState(async () => {
+    if (!isFile.value) {
+        return null
+    }
+    if (!!props?.file?.type) {
+        return props?.file?.type
+    }
+    const { mime } = (await fileTypeFromBuffer(await (props?.file as File)?.arrayBuffer())) || {}
+    return mime
+}, null)
+
+const isImage = computed(() => isFile.value && fileType.value?.startsWith('image/'))
+const isVideo = computed(() => isFile.value && fileType.value?.startsWith('video/'))
 </script>
 
 <template>

front/package.json

@@ -36,8 +36,10 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.20",
+        "file-type": "^22.0.1",
         "filesize": "^10.1.6",
         "hash-wasm": "^4.12.0",
+        "heic-to": "^1.4.2",
         "lodash-es": "^4.18.1",
         "lucide-vue-next": "^0.542.0",
         "markdown-it": "^14.1.1",