Firebase refFromURL is not a function

Asked 28/3, 2018 at 13:55 Answered 5/2 at 0:39

Solved javascript firebase firebase-storage

I'm trying to get some images from Firebase storage using Javascript in an HTML table, but I keep getting this error:

storage.refFromURL is not a function

Which is weird, considering the information from here

// Create a reference from a Google Cloud Storage URI var gsReference = storage.refFromURL('gs://bucket/images/stars.jpg')

The javascript code gets data from a Firebase database as well, and each child in the database contains an URL (defined in the db as imageUrl) to a Firebase storage in the form of gs://xxxxxxx, which I would like to use in a table. In other words, I would like to have the text from a database, and the image from storage, but I keep getting the "not a function" error. I have the following code:

index.js

var rootRef = firebase.database().ref().child("Test");
var storage = firebase.storage().ref();

rootRef.on("child_added", snap => {
  var headline = snap.child("headline").val();
  var url_ul = snap.child("imageUrl").val();

  var storageRef = storage.refFromURL('url_ul').getDownloadURL().then(function(url) {
    var test = url;
    alert(url);
    document.querySelector('img').src = test;
  }).catch(function(error) {});

  $("#table_body").append("</td><td>" + headline + "</td><td><img src='test' alt='' border=3 height=100 width=100></td>");
});

And the HTML file which contains the Firebase information:

<!DOCTYPE html>
<html>

<head>
  <title>Firebase Web Basics</title>
  <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,700" rel="stylesheet">
  <script src="https://use.fontawesome.com/939e9dd52c.js"></script>
</head>

<body>
  <div class="mainDiv" align="left">
    <h1>All users</h1>
    <table>
      <thead>
        <tr>
          <td>Headline</td>
          <td>Image</td>

        </tr>
      </thead>
      <tbody id="table_body">
      </tbody>
    </table>
  </div>

  <script src="https://www.gstatic.com/firebasejs/4.9.1/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "AIxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      authDomain: "xxxxxxxxxxxx.firebaseapp.com",
      databaseURL: "https://xxxxxxxxxxxxx.firebaseio.com",
      projectId: "xxxxxxxxxxxxxxxx",
      storageBucket: "xxxxxxxxxxxxx.appspot.com",
      messagingSenderId: "0000000000000000"
    };
    firebase.initializeApp(config);
  </script>

  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script src="index.js"></script>
  <script src="https://www.gstatic.com/firebasejs/4.12.0/firebase-database.js"></script>

</body>

</html>

Bezant answered 28/3, 2018 at 13:55 Comment(0)

You essentially do:

var storage = firebase.storage().ref();

Which gives you a Reference.

Then you call:

storage.refFromURL('url_ul')

But refFromURL is only defined on the root Storage object.

So you'll want:

var storage = firebase.storage();
storage.refFromURL('url_ul')

Ashton answered 28/3, 2018 at 14:5 Comment(4)

Thank you so much! It did work without ref()! Nice! But now I have this in the console: Firebase Storage: Invalid argument in 'refFromURL' at index 0: Expected full URL but got a child path, use ref instead. The url_ul read gs://xxxxx. I tried that variable in the table. Any idea what may cause it? – Bezant 28/3, 2018 at 14:10

It looks like you're passing in a path instead of a full URL. In that case you'll want to just call storage.ref(path). Note that it's hard to be certain without seeing the actual URL you're passing in (which I assume is not literally 'url_ul'). – Ashton 28/3, 2018 at 14:12

It is a gs path. They key for url_ul in one of the db components contains this: "gs://appname.appspot.com/seminte9.jpg" – Bezant 28/3, 2018 at 14:14

Does this give any useful information? Still didn't figure it out – Bezant 28/3, 2018 at 14:53

In Firebase V7 you can do:

import {
  getStorage,
  deleteObject,
  ref,
} from "firebase/storage";

const storage = getStorage();
const httpsReference = ref(storage, url); // this url is coming from getDownloadURL()

// Then you do whatever you want with the ref, 🍿 like remove files:
deleteObject(httpsReference);

Swig answered 5/2 at 0:39 Comment(0)

Recommended topics

Hot tags