feat(upload): save avatar image in base64 for better storage

Aekal · Nov 23, 2024 · 0ad2bbf · 0ad2bbf
1 parent 47fac99
commit 0ad2bbf
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/src/stores/profile.ts b/src/stores/profile.ts
@@ -4,7 +4,7 @@ import { defineStore } from 'pinia'
 export const useProfileStore = defineStore(
   'profile',
   () => {
-    const avatarImage = ref<string>()
+    const avatarImage = ref<string | ArrayBuffer | null>()
     const firstName = ref<string>('')
     const lastName = ref<string>('')
     const email = ref<string>('')

diff --git a/src/views/ProfileEditView.vue b/src/views/ProfileEditView.vue
@@ -18,15 +18,19 @@ const birthday = ref(profileStore.birthday)
 const about = ref(profileStore.about)
 const uploadError = ref<boolean>(false)
 
-const createAvatarPreview = (file: Blob) => {
-  profileStore.avatarImage = URL.createObjectURL(file)
-}
-const onSubmit = () => {
+const createAvatarPreview = (file: Blob): Promise<string | ArrayBuffer | null> =>
+  new Promise((resolve, reject) => {
+    const fileReader = new FileReader()
+    fileReader.readAsDataURL(file)
+    fileReader.onload = () => resolve(fileReader.result)
+    fileReader.onerror = (error) => reject(error)
+  })
+const onSubmit = async () => {
   if (uploadError.value) {
     return
   }
   if (avatarFile.value) {
-    createAvatarPreview(avatarFile.value)
+    profileStore.avatarImage = await createAvatarPreview(avatarFile.value)
   }
   profileStore.saveProfileData({
     firstName: firstName.value,