I am trying to use the PrimeVue V3 File Upload component with Firebase.

I am also using VueFire to manage the Firebase upload. Only because it provides some convenient composables for managing Firebase Storage uploads. If we have to do away with this part then so be it.

The PrimeVue File Upload component is usually HTTP based, so to make it work with the Firebase client I am using custom-upload and @uploader="handleUpload" to manage the upload process. This part is working, the files are successfully uploaded to Firebase Storage.

My problem is that after upload the images immediately disappear from the File Upload UI. They are not supposed to disappear. They should still be visible with a “complete” tag instead of “pending” tag. I am not sure if this is a bug or something wrong with my custom upload process.

See a live stackblitz reproduction here.

<template>
  <div class="card">
    <FileUpload
      :max-file-size="1000000"
      :multiple="true"
      accept="image/*"
      custom-upload
      @uploader="handleUpload"
    >
      <template #empty>
        <p>Drag and drop files to here to upload.</p>
      </template>
    </FileUpload>
  </div>
</template>

<script setup>
import { ref as storageRef } from 'firebase/storage';
import { useStorageFile, useFirebaseStorage } from 'vuefire';

const storage = useFirebaseStorage();

const handleUpload = async (event) => {
  // Get the files from the event, if single file put it in an array
  const files = Array.isArray(event.files) ? event.files : [event.files];

  // Upload each file using the VueFire composable
  for (const file of files) {
    const fileRef = storageRef(storage, `uploads/${file.name}`);
    const { upload, url } = useStorageFile(fileRef);
    await upload(file);
  }
};
</script>