SelectAvatar.vue

<template>
  <div>
    <SettingsCard :loading="loading">
      <VRow>
        <VCol>
          <FormSubtitle subtitle="Avatar" />
          <div class="text-body-2"> This is your avatar. </div>
          <div class="text-body-2">
            Click on the avatar to upload a custom one from your files.</div
          >
        </VCol>

        <VCol>
          <div class="d-flex justify-end align-center h-100">
            <input
              ref="fileInput"
              style="display: none"
              type="file"
              @change="selectedImage.handleFileChange"
            />

            <RoundedSquareAvatar
              :loading="loading"
              :src="profileAvatar"
              hover
              link
              size="120"
              @click="openFileInput"
            />
          </div>
        </VCol>
      </VRow>

      <template #footer>
        <div class="text-body-2">An avatar is optional but strongly recommended. </div>
        <VSpacer />
        <SettingsButton
          v-if="profileAvatar !== profileAvatarPlaceholder"
          @click="removeProfileAvatar()"
        >
          Remove Avatar
        </SettingsButton>
      </template>
    </SettingsCard>
  </div>
</template>

<script setup>
  // import useSelectImage from '@C/select-image'

  const profileStore = useUserProfileStore()
  const { profileAvatar } = toRefs(profileStore)
  const { updateProfileAvatar, removeProfileAvatar, profileAvatarPlaceholder } = profileStore

  const fileInput = ref()

  // Function to open the file input when the avatar is clicked
  const openFileInput = () => {
    // Use $refs to access the fileInput element and trigger a click event
    fileInput.value && fileInput.value.click()
  }

  // Destructure the returned values from the composable
  const { selectedFile, handleFileChange, displayImage } = useSelectImage()

  // Expose the values and functions as part of the component's API
  const selectedImage = { handleFileChange }

  const loading = ref(false)

  whenever(displayImage, async () => {
    loading.value = true
    try {
      await updateProfileAvatar(selectedFile.value)
      snackbar('Avatar has been updated.')
    } catch (error) {
      snackbar(`Updating avatar failed. ${error}`, 'error')
    } finally {
      loading.value = false
    }
  })
</script>