feat: upload image

src/pages/02_personnel-management/MainPage.vue

@@ -98,6 +98,15 @@ const userStats = ref<BranchUserStats[]>();
 const typeStats = ref<UserTypeStats>();
 const age = ref<number>();
 
+const profileFile = ref<File | undefined>(undefined);
+const inputFile = document.createElement('input');
+inputFile.type = 'file';
+inputFile.accept = 'image/*';
+
+inputFile.addEventListener('change', (e) => {
+  profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
+});
+
 const userTypeOpts = [
   { label: 'พนักงาน', value: 'USER' },
   { label: 'พนักงานส่งเอกสาร', value: 'MESSENGER' },
@@ -131,11 +140,6 @@ async function createKeycloak() {
   return res.data;
 }
 
-function selectFile() {
-  // const fileInput = this.$refs.file;
-  // fileInput.pickFiles();
-}
-
 async function fetchHqOption() {
   if (userOption.value.hqOpts.length === 0) {
     const res = await branchStore.fetchList({ pageSize: 999, filter: 'head' });
@@ -232,16 +236,17 @@ function onClose() {
 
 async function onSubmit() {
   console.log('enter');
+  formData.value.profileImage = profileFile.value as File;
   if (isEdit.value === true && userId.value) {
     console.log('edit');
     await userStore.editById(userId.value, formData.value);
   } else {
     console.log('post');
     formData.value.keycloakId = await createKeycloak();
-    if (formData.value.keycloakId) {
+    if (formData.value.keycloakId !== '') {
+      console.log('keycloakOk');
       const result = await userStore.create(formData.value);
       console.log('Result after create:', result);
-      console.log('bb');
       if (result) {
         console.log('hi3');
         console.log(result.id);
@@ -507,7 +512,7 @@ watch(
           class="upload-img-btn q-my-md full-width"
           label="อัปโหลดรูปภาพ"
           :class="{ dark: $q.dark.isActive }"
-          @click="selectFile()"
+          @click="inputFile.click()"
         />
         <div class="text-left">
           <q-toggle