From 3005d41237870f67cd747cf47f3c467a369d3b18 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 1 Aug 2024 14:29:00 +0700
Subject: [PATCH] feat: handle v-model output

---
 src/components/ImageUploadDialog.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/ImageUploadDialog.vue b/src/components/ImageUploadDialog.vue
index 4e30be93..7806ad0a 100644
--- a/src/components/ImageUploadDialog.vue
+++ b/src/components/ImageUploadDialog.vue
@@ -14,6 +14,9 @@ const dialogState = defineModel<boolean>('dialogState', {
   required: false,
   default: true,
 });
+const file = defineModel<File | null>('file', {
+  required: true,
+});
 
 const reader = new FileReader();
 const inputFile = ref<HTMLInputElement>();
@@ -23,10 +26,13 @@ reader.addEventListener('load', () => {
 });
 
 function change(e: Event) {
-  const element = e.target as HTMLInputElement | null;
-  const file = element?.files?.[0];
+  const _element = e.target as HTMLInputElement | null;
+  const _file = _element?.files?.[0];
 
-  if (file) reader.readAsDataURL(file);
+  if (_file) {
+    file.value = _file;
+    reader.readAsDataURL(_file);
+  }
 }
 </script>
 <template>
@@ -82,7 +88,7 @@ function change(e: Event) {
           color="grey-4"
           text-color="grey-10"
           :label="$t('cancel')"
-          @click="inputFile && (inputFile.value = '')"
+          @click="inputFile && (inputFile.value = ''), (file = null)"
           class="q-px-md q-mr-sm"
           v-close-popup
         />