Question

0

97

Views

Using firestore with vue to get image url

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);
});

almost 3 years ago · Juan Pablo Isaza

2 answers

Answer question

0

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}`);

        // ....

almost 3 years ago · Juan Pablo Isaza Report

0

Answer question

Find remote jobs

Accepted Answer · 2022-07-09T05:26:41.125Z

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"

0

97

Using firestore with vue to get image url

2 answers

0

0

Find remote jobs

Andres GPT