EddyVerbruggen / nativescript-plugin-firebase

:fire: NativeScript plugin for Firebase
https://firebase.google.com
MIT License
1.01k stars 448 forks source link

`TypeError: item.getDownloadURL is not a function` on listAll Result #1825

Closed Septias closed 2 years ago

Septias commented 3 years ago

Hey there,

I want to get the download URL's of some pictures from firebase-storage and I went with the naive approache to do it like this:

firebase
      .storage()
      .ref()
      .child(String(this.offer.order))
      .listAll()
      .then((result) => {
        result.items.forEach(function (item) {
          console.log("item: ", item);
          item.getDownloadURL().then((a) => console.log(a)); // This line produces `TypeError: item.getDownloadURL is not a function` 
          this.pictures.push({
            ...item,
          });
        });
      })
      .catch((err) => console.log(err));

I looked into the firebase/storage References and some threads on Stack-overflow and this method seems to exist on Reference, but I somehow can't use it. What shall I do to fix this?

Septias commented 3 years ago

Workaround: Even though the method does not exist on the instance, you can use native-api and its method getDownloadUrl to retrieve it. I don't know if this the intended way to do it so I'll keep this issue open.

import { storage } from "@nativescript/firebase/app";
import { firebase } from "@nativescript/firebase";
import { ObservableArray } from "@nativescript/core";
const storage_instance = storage();

export default {
  props: ["offer"],
  data() {
    return {
      pictures: [],
    };
  },
  mounted() {
    storage_instance
      .ref()
      .child(String(this.offer.order))
      .listAll()
      .then((result) => {
        result.items.forEach(function (item) {
          firebase.storage
            .getDownloadUrl({
              remoteFullPath: item.fullPath,
            })
            .then(
              function (url) {
                console.log("Remote URL: " + url);
                pictures.push(url);
              },
              function (error) {
                console.log("Error: " + error);
              }
            );
        });
      })
      .catch((err) => console.log(err));
  },
};