Fix NameEditor reservations handling of errors

frontend/src/views/creators/CreatorLogoEditor.vue

@@ -4,21 +4,30 @@
       Logo
     </div>
 
-    <div class="card-content flex flex-col items-center">
+    <div class="card-content">
+      <div class="image-preview-container">
         <img
             :src="fileUrl || fallbackUrl"
             alt="Aperçu du logo"
-          class="mb-5 transition duration-200 ease-in-out transform w-[200px] h-[200px]"
+            class="preview-image"
         />
+      </div>
 
-      <v-file-input
+      <div class="file-input-container">
-          v-model="selectedFile"
+        <input
+            type="file"
+            ref="fileInput"
             accept="image/*"
-          class="w-full"
+            class="hidden"
-          label="Votre logo"
-          variant="outlined"
             @change="onFileSelected"
-      ></v-file-input>
+        />
+        <button 
+            class="choose-file-button"
+            @click="triggerFileInput"
+        >
+          Choisir une image...
+        </button>
+      </div>
     </div>
 
     <div class="card-actions">
@@ -32,10 +41,8 @@
       </button>
     </div>
   </div>
-
 </template>
 
-
 <script setup>
 import {ref} from 'vue'
 import {useClient} from '@/plugins/api.js'
@@ -48,18 +55,26 @@ const props = defineProps({
 
 const emits = defineEmits(['closeRequested'])
 
-const selectedFile = ref("")
+const fileInput = ref(null)
+const selectedFile = ref(null)
 const fileUrl = ref(props.creator.images.logo)
-const fallbackUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png' // Chemin de votre image de secours
+const fallbackUrl = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png'
 
-const onFileSelected = () => {
+const triggerFileInput = () => {
-  if (selectedFile.value) {
+  fileInput.value.click()
-    const reader = new FileReader()
-    reader.onload = (event) => {
-      fileUrl.value = event.target.result
 }
-    reader.readAsDataURL(selectedFile.value)
+
+const onFileSelected = (event) => {
+  const file = event.target.files[0]
+  if (file) {
+    selectedFile.value = file
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      fileUrl.value = e.target.result
+    }
+    reader.readAsDataURL(file)
   } else {
+    selectedFile.value = null
     fileUrl.value = null
   }
 }
@@ -67,15 +82,16 @@ const onFileSelected = () => {
 const client = useClient()
 const publish = async () => {
   try {
-    const formData = new FormData();
+    const formData = new FormData()
     formData.append('file', selectedFile.value)
 
     const response = await client.post(
         `/api/creators/${props.creator.id}/logo`,
-        formData)
+        formData
+    )
 
-    props.creator.images.logo = `${response.data.blobUrl}?t=${Date.now()}`;
+    props.creator.images.logo = `${response.data.blobUrl}?t=${Date.now()}`
-    emits('closeRequested');
+    emits('closeRequested')
   } catch (error) {
     console.error(error)
   }
@@ -86,3 +102,38 @@ const cancel = () => {
 }
 </script>
 
+<style scoped>
+.image-preview-container {
+  @apply mb-5;
+  @apply w-full;
+  @apply flex;
+  @apply justify-center;
+  @apply items-center;
+  @apply overflow-hidden;
+  @apply rounded-lg;
+  @apply bg-gray-100;
+}
+
+.preview-image {
+  @apply w-[200px];
+  @apply h-[200px];
+  @apply object-cover;
+  @apply rounded-full;
+}
+
+.file-input-container {
+  @apply flex;
+  @apply justify-center;
+  @apply items-center;
+  @apply w-full;
+}
+
+.choose-file-button {
+  @apply px-4;
+  @apply py-2;
+  @apply primary;
+  @apply rounded-lg;
+  @apply cursor-pointer;
+}
+</style>
+