refactor(image): ♻️ file select event to model update (#406)

* Refactor file select event to model update

#405

* fix(image): 🐛 code formatting and improved exception messages

---------

Co-authored-by: Matej Fartelj <[email protected]>
Co-authored-by: yikoyu <[email protected]>

src/extensions/components/image/ImageUpload.vue

@@ -4,6 +4,7 @@ import { computed, ref, unref } from 'vue'
 import type { ImageForm } from './types'
 
 import { getIcon } from '@/constants/icons'
+import Logger from '@/utils/logger'
 
 interface Props {
   modelValue?: ImageForm
@@ -28,21 +29,27 @@ const form = computed({
   set: val => emit('update:modelValue', val)
 })
 
-async function onFileSelected(event: { isTrusted: boolean }) {
-  const { file } = unref(form)
-  if (!file || !event.isTrusted) return
+const onFileSelected = async (files: File | File[]) => {
+  const file = files instanceof File ? files : files[0]
+  if (!file) {
+    throw new Error('No files to upload')
+  }
 
   try {
-    loading.value = true
-    const data = await props.upload?.(file)
-    if (!data) return
+      loading.value = true
+      const data = await props.upload?.(file)
+      if (!data) {
+        throw new Error('No link received after upload')
+      }
 
-    form.value = {
-      ...unref(form),
-      src: data
-    }
+      form.value = {
+          ...unref(form),
+          src: data
+      }
+  } catch (err) {
+      Logger.error(`Failed to execute upload file: ${err}`)
   } finally {
-    loading.value = false
+      loading.value = false
   }
 }
 </script>
@@ -55,7 +62,7 @@ async function onFileSelected(event: { isTrusted: boolean }) {
       accept="image/*"
       :loading="loading"
       :prepend-icon="getIcon('fileImagePlus')"
-      @change="onFileSelected"
+      @update:model-value="onFileSelected"
       @click:clear="form.src = undefined"
     />