Using firestore with vue to get image url

Question

I'm new to firebase storage. I've been able to use firestore with documents using VUE, but I'm using storage for images.

I'm getting continual errors and I believe it relates to failing to create the reference as required.

Questions:

Firebase storage requires a "ref" function. How do I import that per firebase documentation in a way that doesn't conflict with the vue "ref" function? My attempt is below, but it's not working.
As currently set up below, I get an error 0 , firebase_config__WEBPACK_IMPORTED_MODULE_4_.storageRef) is not a function. I can't figure out how to overcome this--I keep going through documentation and reviewing videos, but I haven't figured it out yet.

Here is the config setup:

 import { initializeApp } from "firebase/app";
 import { getFirestore } from "firebase/firestore";
 import { getStorage, ref } from "firebase/storage";

const firebaseConfig = {
  [Info]
};

// init firebase
initializeApp(firebaseConfig);

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

// Get a reference to the storage service, which is used to 
create references in your storage bucket
const storage = getStorage(initializeApp(firebaseConfig));

const storageRef = ref(storage);

export { db, storage, storageRef };

Here is the Vue setup:

 import { computed, ref } from "vue";
 

 //firebase imports
 import { db, storage, storageRef } from 
  "../../firebase/config"; 
 import { collection, getDocs } from "firebase/firestore";
 import { getDownloadURL } from "firebase/storage";

export default {
name: "Name",


setup() {

const imagesRef = storageRef(storage);



getDownloadURL(imagesRef).then((url) => {
  // Insert url into an <img> tag to "download"
  console.log(url);
});

Renaud Tarnec · Accepted Answer · 2021-12-03 15:13:54Z

1

The following will do the trick:

Firebase config:

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

const firebaseConfig = {
    apiKey: "...",
    // ...   
};

const firebaseApp = initializeApp(firebaseConfig);
const db = getFirestore(firebaseApp);
const storage = getStorage(firebaseApp);

export { db, storage };

Vue.js component:

// ...
<script>
import { db, storage } from '../../firebase/config';  // Import db only if you need to use Firestore in this component
import {
  collection,
  // ...
} from 'firebase/firestore';  // Idem, only if you need to use Firestore in this component

import {
  ref,
  getDownloadURL,
  // ...
} from 'firebase/storage';

export default {
  // ...
  data: () => ({
    // ...
  }),
  methods: {
    async uploadFile(file) {
      try {
        const fileName = file.name;

        const fileRef = ref(storage, `myFolder/${fileName}`);

        // ....

edited Dec 3, 2021 at 15:13

answered Dec 3, 2021 at 15:08

Renaud Tarnec

83.4k10 gold badges99 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jdost_26 Over a year ago

Hi Renaud! Thank you for your help. I think your config structure worked. I'm using the Vue Setup API, which requires an imported ref funciton from vue, and that conflicts with the firestore import. Should I (a) try to import the vue ref globally, (b) put the firebase import in the config file, or (c) do something else?

SSoulMiles · Accepted Answer · 2021-12-14 17:27:56Z

You may use an alias when importing the ref function required by Firebase Storage and distinguish it from the required by Vue.

import Vue from "vue";
import App from "./App.vue";
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage, ref as refStorage } from "firebase/storage";

const firebaseConfig = {
  [Info]
};

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

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

const storage = getStorage(firebaseApp);

// Get a reference to the storage service, which is used to create references in your storage bucket
const storageRef = refStorage(storage);

export { db, storage, storageRef };

new Vue({
  render: (h) => h(App)
}).$mount("#app");

I have used Code Sandbox to test the above code and added the following versions of Firebase dependencies to the package.json file:

"@firebase/storage": "0.9.0"
"firebase": "9.6.1"

Collectives™ on Stack Overflow

Using firestore with vue to get image url

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related