Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

168
Vistas
Firebase 9 and ref function with Vue composition

I want to upload an image to firebase storage, version 9. I have working code for the firestore, but I cant for the life of me understand the firebase docs regarding uploading, and how to make it work for Vue (which also requires the import of a REF function).

my question is: How do I import the ref function in Vue and also import and use the ref function from firebase firestore?

This is what I have. It feels wrong to wrap the Firebase ref with a .value, but I just put it in there to get past the vue error.

vue component code fragment: <-- this works

if (imageFile.value) {
        await uploadImage(imageFile.value);
        console.log("image:" + url.value);
      }

useStorage.js <--this is where everything breaks down trying to convert from Firebase 8 to 9. Is it the vue Ref function?

import { ref } from "vue";
import { projectStorage } from "../firebase/config";
import { uploadBytesResumable, getDownloadURL } from 
"@firebase/storage";


const useStorage = () => {
const error = ref(null);
const url = ref(null);
const filePath = ref(null);
  
 //I need to use ref with firestore here
 const uploadImage = async (file) => {
    filePath.value = `images/${file.name}`;
    const storageRef = ref(projectStorage, 
  filePath.value).value;


   try {
     const res = await storageRef.put(file);
     url.value = res.ref.getDownloadURL();
   } catch (err) {
     console.log(err.message);
     error.value = err.message;
   }
 };

return { url, filePath, error, uploadImage };
};

export default useStorage;

config.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  [info]
};

// init firebase
const firebaseApp = initializeApp(firebaseConfig);

// init firestore service
const db = getFirestore(firebaseApp);

// init firestore authorization
const auth = getAuth(firebaseApp);


const projectStorage = getStorage(firebaseApp);



export { db, projectStorage, auth };
about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You can set an alias for either of the imports as shown below:

import { ref } from "vue";
import { projectStorage } from "../firebase/config";
import { ref as storageRef } from "@firebase/storage";


const fileRef = storageRef(projectStorage, filePath.value);
// use storageRef here ^^^ instead of ref from vue

Also checkout: How to import two classes by the same name in javascript/es6?

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda