So, ok. I came up with a solution with factory function but it spits out an error.
This one is a free project on firebase.
import firebase from "firebase/app";
import "firebase/storage";
const firebaseConfig = {
apiKey: "AIzaSyCp5sEmtSaDOjIdm5E88Wy41cCqFOoYd2o",
authDomain: "someproject-43c3a.firebaseapp.com",
projectId: "someproject-43c3a",
storageBucket: "someproject-43c3a.appspot.com",
messagingSenderId: "445668329191",
appId: "1:445668329191:web:9bebd22c71e3ca8c05c442",
};
// init firebase
firebase.initializeApp(firebaseConfig);
// init services
const projectStorage = firebase.storage();
export { projectStorage};
And this is the useStorage composable
import { projectStorage } from "../boot/firebase";
import { ref } from "vue";
const useStorage = () => {
const error = ref(null);
const downloadURL = ref(null);
const filePath = ref(null);
const uploadFile = async (file) => {
filePath.value = `covers/${file.name}`;
const storageRef = projectStorage.ref(filePath.value);
try {
const res = await storageRef.put(file);
downloadURL.value = await res.ref.getDownloadURL();
} catch (err) {
console.log(err.message);
error.value = err;
}
};
return { uploadFile, downloadURL, error };
};
export default useStorage;
And this is where it’s placed in the the Quploader as a factory function.
<template>
<q-page class="flex flex-center">
<q-uploade
multiple
:factory="factory"
@factory-failed="onFactoryFail"
></q-uploader>
</q-page>
</template>
<script>
import { ref } from "vue";
import useStorage from "src/composables/useStorage";
import { projectStorage } from "src/boot/firebase";
export default {
name: "PageIndex",
setup(props) {
const {
uploadFile,
downloadURL,
} = useStorage();
//Events
async function factory(files) {
// console.log("files[0].name:", files[0].name);
await uploadFile(files[0]);
console.log("downloadURL.value:", downloadURL.value);
}
function onFactoryFail(err, files) {
console.log("factoryFail error:", err);
console.log("factoryFail files:", files);
}
return {
factory, onFactoryFail
};
},
};
</script>
It’s giving me the downloadURL.value, so it’s successful in uploading. @factory-failed is giving me the following errors about url:
factoryFail error: TypeError: Cannot read property 'url' of undefined at getProp (xhr-uploader-plugin.js?e40a:131) at performUpload (xhr-uploader-plugin.js?e40a:136) at eval (xhr-uploader-plugin.js?e40a:116)
factoryFail files: [File] (Eventhough the bucket has that file uploaded in it)
Eventually this is the screen that the user ends up with:
0d74fbfd-f152-4577-a984-bb8ba497bdae-image.png
A similar error has been recorded in this topic but didn’t receive a solution.
