edit profile

Author: rockstarr-programmerr

src/api/account.ts

@@ -35,7 +35,25 @@ export const account = {
   },
 
   async updateProfile (payload: UpdateProfileReq): Promise<UpdateProfileRes> {
-    const res = await Vue.axios.patch(endpoints.account.me.updateProfile, payload)
+    let formData: FormData | UpdateProfileReq
+    let contentType: string
+
+    if (payload.avatar !== null) {
+      formData = new FormData()
+      Object.entries(payload).forEach(([key, value]) => {
+        (formData as FormData).append(key, value)
+      })
+      contentType = 'multipart/formdata'
+    } else {
+      formData = payload
+      contentType = 'application/json'
+    }
+
+    const res = await Vue.axios.patch(endpoints.account.me.updateProfile, formData, {
+      headers: {
+        'Content-Type': contentType
+      }
+    })
     return res.data
   }
 }

src/interfaces/api/account.ts

@@ -39,7 +39,7 @@ export declare interface UserDetailRes extends User {}
 export declare interface UpdateProfileReq {
   name?: User['name'];
   phone_number?: User['phone_number'];
-  avatar?: User['avatar'];
+  avatar?: File | null;
 }
 
 export declare interface UpdateProfileRes extends User {}

src/views/account/MyInfo.vue

@@ -17,7 +17,20 @@
               v-if="user.avatar !== null"
               :src="user.avatar"
               :alt="user.name"
-            ></v-img>
+            >
+              <template #placeholder>
+                <v-row
+                  class="fill-height ma-0"
+                  justify="center"
+                  align="center"
+                >
+                  <v-progress-circular
+                    indeterminate
+                    color="primary"
+                  ></v-progress-circular>
+                </v-row>
+              </template>
+            </v-img>
             <span
               v-else
               class="white--text"

src/views/account/ProfileUpdate.vue

@@ -5,10 +5,7 @@
     <h1>Edit profile</h1>
     <v-divider></v-divider>
 
-    <v-card
-      v-if="localUser !== null"
-      class="mt-5"
-    >
+    <v-card class="mt-5">
       <v-card-text>
         <v-form>
           <v-text-field
@@ -17,12 +14,21 @@
             :error-messages="nameErrs"
             :error-count="nameErrs.length"
           ></v-text-field>
+
           <v-text-field
             v-model="phoneNumber"
             label="Phone number"
             :error-messages="phoneNumberErrs"
             :error-count="phoneNumberErrs.length"
           ></v-text-field>
+
+          <v-file-input
+            v-model="avatar"
+            label="Avatar"
+            prepend-icon="mdi-camera"
+            :error-messages="avatarErrs"
+            :error-count="avatarErrs.length"
+          ></v-file-input>
         </v-form>
       </v-card-text>
 
@@ -66,15 +72,32 @@ export default class ProfileUpdate extends Vue {
   ]
 
   user!: User
+
   name: User['name'] = ''
   phoneNumber: User['phone_number'] = ''
+  avatar: File | null = null
+  originalAvatar: File | null = null
+
   nameErrs: string[] = []
   phoneNumberErrs: string[] = []
+  avatarErrs: string[] = []
+
   loading = false
 
   created (): void {
     this.name = this.user.name
     this.phoneNumber = this.user.phone_number
+
+    if (this.user.avatar !== null) {
+      Vue.axios.get(this.user.avatar)
+        .then(res => {
+          const parts = this.user.avatar.split('/')
+          const avatarName = parts[parts.length - 1]
+          const file = new File([res.data], avatarName)
+          this.avatar = file
+          this.originalAvatar = file
+        })
+    }
   }
 
   saveProfile (): void {
@@ -86,6 +109,10 @@ export default class ProfileUpdate extends Vue {
       phone_number: this.phoneNumber
     }
 
+    if (this.avatar !== this.originalAvatar) {
+      payload.avatar = this.avatar
+    }
+
     this.$store.dispatch('account/updateProfile', payload)
       .then(() => {
         this.$router.push({ name: 'MyInfo' })