Initial commit

app/components/Profile/AvatarUpload.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="flex flex-wrap items-center gap-3">
+    <ProfileAvatar
+      size="lg"
+    />
+    <UButton
+      :label="$t('profile.choose')"
+      color="neutral"
+      :loading="uploading"
+      @click="onFileClick"
+    />
+    <input
+      ref="fileRef"
+      type="file"
+      class="hidden"
+      accept=".jpg, .jpeg, .png, .gif"
+      @change="onFileChange"
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+const toast = useToast()
+
+const fileRef = ref<HTMLInputElement>()
+const uploading = ref(false)
+
+async function onFileChange(e: Event) {
+  const input = e.target as HTMLInputElement
+
+  const files = input.files
+  try {
+    uploading.value = true
+    if (!files || files.length === 0) {
+      throw new Error('You must select an image to upload.')
+    }
+    const file = files[0]
+    await useAvatar().uploadAvatar(file!)
+
+    toast.add({
+      title: t('profile.success'),
+      description: t('profile.avatarUploaded'),
+      icon: 'i-lucide-check',
+      color: 'success'
+    })
+  } catch (error) {
+    toast.add({ color: 'error', description: (error as Error).message })
+  } finally {
+    uploading.value = false
+  }
+}
+
+function onFileClick() {
+  fileRef.value?.click()
+}
+</script>