From 78e3f0ff0ccae4c281aee5e6096258349bedb605 Mon Sep 17 00:00:00 2001
From: Flycro <flycro@live.de>
Date: Thu, 21 Mar 2024 12:36:24 +0100
Subject: [PATCH] fix: Preview for local Files #4

---
 nuxt/components/modal/EditBookRecommendation.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/nuxt/components/modal/EditBookRecommendation.vue b/nuxt/components/modal/EditBookRecommendation.vue
index b6b34f4..d4c3b6d 100644
--- a/nuxt/components/modal/EditBookRecommendation.vue
+++ b/nuxt/components/modal/EditBookRecommendation.vue
@@ -118,6 +118,10 @@ async function onSubmit(event: FormSubmitEvent<any>) {
 function isFile(value: any): value is File {
   return value instanceof File
 }
+
+function getFileUrl(file: File) {
+  return URL.createObjectURL(file)
+}
 </script>
 
 <template>
@@ -150,7 +154,7 @@ function isFile(value: any): value is File {
           </UFormGroup>
           <img v-if="state.cover_image && typeof state.cover_image === 'string'" :src="$storage(state.cover_image)" alt="Cover" class="size-1/3 content-center rounded-lg">
           <ClientOnly>
-            <img v-if="state.cover_image && isFile(state.cover_image)" :src="URL.createObjectURL(state.cover_image)" alt="Cover" class="size-1/3 content-center rounded-lg">
+            <img v-if="state.cover_image && isFile(state.cover_image)" :src="getFileUrl(state.cover_image)" alt="Cover" class="size-1/3 content-center rounded-lg">
           </ClientOnly>>
           <UFormGroup label="Cover" name="cover_image">
             <UInput type="file" @change="handleCoverImageInput" />