How to use Quasar createUploaderComponent App Extension with VueFire Storage upload?

[BenJackGill]

I'm trying to use Quasar createUploaderComponent element as shown in the docs here and pair it with the VueFire Storage upload composable.

This is my code, the console.logs print correctly, but the file never uploads to Firebase storage.

Any idea what could be wrong?

I extended the component like this:

import { createUploaderComponent } from "quasar";
import { computed, PropType } from "vue";
import { useStorageFile } from "vuefire";
import { StorageReference } from "firebase/storage";

export default createUploaderComponent({
  name: "FirebaseUploader",

  props: {
    storageRef: Object as PropType<StorageReference>,
  },

  injectPlugin({ props, emit, helpers }) {
    const {
      uploadProgress,
      upload: vueFireUpload,
      uploadTask,
    } = useStorageFile(props.storageRef);

    const isUploading = computed(
      () => uploadProgress.value !== null && uploadProgress.value < 100,
    );
    const isBusy = computed(() => uploadProgress.value !== null);

    const abort = () => {
      uploadTask.value?.cancel();
    };

    const upload = async () => {
      if (props.storageRef && helpers.queuedFiles.value.length > 0) {
        const file = helpers.queuedFiles.value[0];
        console.log("file", file); // This shows the correct file
        try {
          console.log("before vueFireUpload"); // This prints
          vueFireUpload(file); // I have also tried awaiting this, it makes no difference
          console.log("after vueFireUpload"); // This also prints
        } catch (error) {
          console.error("error", error); // This does not print
        }
      }
    };

    return {
      isUploading,
      isBusy,
      abort,
      upload,
    };
  },
});

[BenJackGill]

Ok got this working by wrapping props.storageRef with a computed ref inside injectPlugin and using that instead of props.storageRef throughout:

const storageRef = computed(() => props.storageRef;

But now I have another question...

I would also like to hook into and provide values for the QUploader upload progress and file status.

Is that possible?

The docs only show possible values for isUploading and isBusy but the upload progress percentage and final upload file status are also crucial for completing the extension. Without these the user has no sense of the how long the upload will take, or if the upload finally worked in the end.