diff --git a/front/components/FileIcon.vue b/front/components/FileIcon.vue
index e767552..b085150 100644
--- a/front/components/FileIcon.vue
+++ b/front/components/FileIcon.vue
@@ -1,10 +1,16 @@
 <script setup lang="ts">
+export type filePreview = {
+    type: string
+    name: string
+    size: number
+}
+
 import { LucideFileAudio, LucideFileVideo, LucideFile, LucideFileCode, LucideFileArchive, LucideFileText } from 'lucide-vue-next'
 const props = defineProps<{
-    file: File
+    file: File | filePreview
 }>()
 const imageUrl = computed(() => {
-    if (props?.file?.type?.startsWith('image/')) {
+    if (props?.file?.type?.startsWith('image/') && props?.file instanceof File) {
         return URL.createObjectURL(props?.file)
     }
     return null
diff --git a/front/components/FilePreviewView.vue b/front/components/FilePreviewView.vue
index f6b89ae..47298fb 100644
--- a/front/components/FilePreviewView.vue
+++ b/front/components/FilePreviewView.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { filesize } from 'filesize'
+import type { filePreview } from './FileIcon.vue';
 const props = defineProps<{
-    value: File
+    value: File | filePreview
 }>()
 const fileInfo = computed(() => {
     const [, name, ext] = props?.value?.name?.match(/^(.+)\.(.+)$/) || []