From 7cb55879f8f53bcca37752b413a32389f7bc0631 Mon Sep 17 00:00:00 2001
From: Methapon Metanipat <methapon@frappet.com>
Date: Tue, 12 Nov 2024 16:44:33 +0700
Subject: [PATCH] feat: add upload area component

---
 src/components/upload-file/UploadFileArea.vue | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/components/upload-file/UploadFileArea.vue

diff --git a/src/components/upload-file/UploadFileArea.vue b/src/components/upload-file/UploadFileArea.vue
new file mode 100644
index 00000000..674f206e
--- /dev/null
+++ b/src/components/upload-file/UploadFileArea.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { QFile } from 'quasar';
+import { ref } from 'vue';
+import { MainButton } from '../button';
+
+type Value = File[] | File;
+
+defineProps<{
+  label?: string;
+  readonly?: boolean;
+  accept?: string;
+  multiple?: boolean;
+}>();
+
+defineEmits<{
+  (e: 'file', v: Value): void;
+}>();
+
+const file = ref<Value | undefined>();
+
+const element = ref<InstanceType<typeof QFile>>();
+</script>
+
+<template>
+  <div
+    class="upload-section column rounded q-py-md full-height items-center justify-center no-wrap surface-2"
+  >
+    <q-img src="/images/upload.png" width="150px" />
+    <MainButton
+      color="var(--blue-6-hsl)"
+      icon="mdi-import"
+      solid
+      pill
+      @click.stop="element?.pickFiles()"
+    >
+      {{ label }}
+    </MainButton>
+    <q-file
+      :multiple="!!multiple"
+      :accept
+      ref="element"
+      v-show="false"
+      v-model="file"
+      @update:model-value="(v: Value) => $emit('file', v)"
+    />
+  </div>
+</template>