refactor(profile): Change upload component

Author: becem-gharbi

components/Account/Profile.vue

@@ -1,21 +1,19 @@
 <template>
   <div>
-    <n-upload
-      class="overflow-hidden w-min mx-auto my-4"
-      list-type="image-card"
-      :max="1"
-      accept="image/*"
-      :custom-request="(e) => file = e.file.file"
-    >
-      <img v-if="model.picture" :src="model.picture" class="object-cover">
-    </n-upload>
+    <ImageUpload
+      ref="uploadRef"
+      class="mx-auto shadow hover:shadow-lg border-blue-300 border-2"
+      :src="model.picture"
+      :width="180"
+      @select="(f)=> model.file=f"
+    />
 
     <n-form ref="formRef" @submit.prevent="onSubmit(updateAccount)">
       <n-form-item label="Name">
         <n-input v-model:value="model.name" />
       </n-form-item>
 
-      <FormButtons :loading="pending" :disabled="pending" @reset="reset" />
+      <FormButtons :loading="pending" :disabled="pending || !edited" @reset="handleReset" />
     </n-form>
   </div>
 </template>
@@ -25,23 +23,29 @@ const { user } = useAuthSession()
 const { upload } = useS3Object()
 const { fetchUser } = useAuth()
 
+const uploadRef = ref()
+
 const model = ref({
   name: user.value?.name,
-  picture: user.value?.picture
+  picture: user.value?.picture,
+  file: undefined
 })
 
-const { formRef, pending, onSubmit, reset } = useNaiveForm(model)
-
-const file = ref<File | null>()
+const { edited, formRef, pending, onSubmit, reset } = useNaiveForm(model)
 
 const loading = ref(false)
 
+function handleReset () {
+  uploadRef.value.reset()
+  reset()
+}
+
 async function updateAccount () {
   try {
     loading.value = true
 
-    if (file.value) {
-      const url = await upload(file.value, {
+    if (model.value.file) {
+      const url = await upload(model.value.file, {
         url: model.value.picture,
         prefix: `image/${user.value!.id}/`
       })
@@ -54,7 +58,7 @@ async function updateAccount () {
       body: model.value
     })
 
-    file.value = null
+    model.value.file = undefined
 
     await fetchUser()
   } finally {

components/Form/Buttons.vue

@@ -3,7 +3,7 @@
     <n-button type="primary" attr-type="submit" :loading="loading" :disabled="disabled">
       Save
     </n-button>
-    <n-button secondary attr-type="button" :disabled="disabled" @click="$emit('reset')">
+    <n-button secondary attr-type="reset" :disabled="disabled" @click="$emit('reset')">
       Reset
     </n-button>
   </div>

components/Image/Upload.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="relative rounded-full" :style="{width:`${width}px`}">
+    <div class="absolute right-2 bottom-2 border-4 rounded-full" :style="{borderColor: theme.bodyColor}">
+      <n-button circle type="primary" @click="()=>input?.click()">
+        <template #icon>
+          <naive-icon name="ph:camera" />
+        </template>
+      </n-button>
+    </div>
+
+    <div class="overflow-hidden rounded-full" :style="{ height:`${width}px`}">
+      <n-image
+        class="h-full"
+        :width="width"
+        :src="image"
+        :fallback-src="placeholder"
+        object-fit="cover"
+      />
+    </div>
+
+    <input
+      ref="input"
+      type="file"
+      hidden
+      accept="image/*"
+      @change="onSelect"
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+
+const props = withDefaults(defineProps<{ src?: string, width?: number, placeholder?: string }>(), {
+  src: '/images/placeholder.webp',
+  placeholder: '/images/placeholder.webp',
+  width: 150
+})
+
+const emit = defineEmits(['select'])
+
+const inputImage = computed(() => props.src)
+
+const image = ref(inputImage.value)
+
+const input = ref<HTMLInputElement>()
+
+watch(inputImage, () => reset())
+
+const theme = useThemeVars()
+
+function reset () {
+  image.value = inputImage.value
+}
+
+function getBase64 (file:File):Promise<string | undefined> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = () => resolve(reader.result?.toString())
+    reader.onerror = error => reject(error)
+  })
+}
+
+async function onSelect (event:any) {
+  const selectedFile = event.target.files[0]
+  const selectedFileUrl = await getBase64(selectedFile)
+
+  if (selectedFileUrl) {
+    image.value = selectedFileUrl
+    emit('select', selectedFile)
+  }
+}
+
+defineExpose({ reset })
+</script>