มาลองทำ upload ทั้ง 2 ฝั่ง

import { defineStore } from 'pinia'

import { db, auth } from '@/firebase'

export const useAccountStore = defineStore('user-account', {
  state: () => ({
    isLoggedIn: false,
    isAdmin: false,
    user: {},
    profile: {}
  }),
  actions: {
    async checkAuthState () {
      return new Promise((resolve) => {
        onAuthStateChanged(auth, async (user) => {
          try {
            if (user) {
              this.user = user
              this.isLoggedIn = true
              const docRef = doc(db, 'users', user.uid)
              const docSnap = await getDoc(docRef)

              if (!docSnap.exists()) {
                console.log('user not found')
                console.log('user', user)
                const userData = {
                  name: user.displayName,
                  role: 'member',
                  status: 'active',
                  updatedAt: new Date()
                }
                await setDoc(docRef, userData)
                this.profile = userData
              } else {
                this.profile = docSnap.data()
              }

              // เพิ่ม email เข้ามาใน profile (เนื่องจากเราไม่ได้เก็บ email ลง Firestore)
              this.profile.email = user.email

              if (this.profile.role !== 'member') {
                this.isAdmin = true
              }
              resolve(true)
            } else {
              resolve(false)
            }
          } catch (error) {
            console.log('error', error)
            resolve(false)
          }
        })
      })
    },
    // เพิ่ม updateProfile เข้ามา
    async updateProfile (userData) {
      try {
        const updateUserData = {
          name: userData.name,
          imageUrl: userData.imageUrl
        }
        const userRef = doc(db, 'users', this.user.uid)
        await updateDoc(userRef, updateUserData)
      } catch (error) {
        console.log('error', error)
      }
    }
  }
})

<script setup>
/* import ตัวอื่นๆก่อนหน้า */
import { onMounted, ref } from 'vue'
import { useAccountStore } from '@/stores/account'

import { ref, uploadBytes, getDownloadURL } from 'firebase/storage'
import { storage } from '@/firebase'

const userData = reactive({
  imageUrl: 'https://mikelopster.dev/mikelopster.da6b9a03.webp',
  email: '',
  name: ''
})

onMounted(() => {
  const userProfile = accountStore.profile
  userData.imageUrl = userProfile.imageUrl
  userData.email = userProfile.email
  userData.name = userProfile.name
})

const handleFileChange = async (event) => {
  const file = event.target.files[0]

  console.log(file)

  if (file) {
    const storageRef = ref(
      storage,
      `users/${accountStore.user.uid}/${file.name}`
    )
    const snapshot = await uploadBytes(storageRef, file)
    const downloadURL = await getDownloadURL(snapshot.ref)
    userData.imageUrl = downloadURL
  }
}
</script>
<template>
  <UserLayout>
    <!-- ใช้ upload แค่ตรงนี้ -->
    <input type="file" @change="handleFileChange">
  </UserLayout>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
// ต้องเปลี่ยนชื่อ ref เพราะชนกับ ref ของ Vue
import { ref as storageRef, uploadBytes, getDownloadURL  } from 'firebase/storage'
import { storage } from '@/firebase'

const handleFileChange = async (event) => {
  const file = event.target.files[0]

  if (file) {
    // ใช้ path /products แทน
    const productRef = storageRef(
      storage,
      `products/${productId.value}-${file.name}`
    )
    const snapshot = await uploadBytes(productRef, file)
    const downloadURL = await getDownloadURL(snapshot.ref)
    selectedProduct.value.imageUrl = downloadURL
  }
}
</script>
<template>
  <AdminLayout>
    <!-- แก้ไขแค่ตรงภาพ จากแต่เดิมเป็นกล่อง input -->
    <div class="form-control w-full">
      <label class="label">
        <span class="label-text text-base-content">
          Image
        </span>
        <div class="avatar">
          <div class="w-24 rounded-full">
            <img :src="selectedProduct.imageUrl" />
          </div>
        </div>
      </label>
      <input
        type="file"
        placeholder=""
        @change="handleFileChange"
      />
    </div>
  </AdminLayout>
</template>