How to download a file (image) from Firebase Storage based on a reference of Firebase data

[Victor Rodriguez]

Hello :

I have been struggling for days with this issue. I'm trying to use Firebase Storage in my web app, the "Upload" part is working fine, and I like it, but the "Download" part is driving me crazy. Here is my code:

First I have my Firebase (data) reference:

var refspaedtServ = new Firebase(FBURLSPA + $routeParams.id);

$scope.spaedServ = $firebaseObject(refspaedtServ);

I'm getting my record within an ID. Second I get my object field call "foto", is the name of the photo that I want to download or show

var lafoto= '';

refspaedtServ.on("value", function(rootSnapshot) {

lafoto = rootSnapshot.val().foto;

console.log("Inside image ", lafoto)

});

So here I get the name of the Photo. Since this is an asynchronous communication, I was unable to get the value, so I insert a Timeout function:

setTimeout(function(){

console.log("outside ", lafoto);

$scope.lafoto = lafoto

}, 1000);

So here inside the setTime function, is the "lafoto" value OK. Then I get the refrence of my Firebase Storage Bucket:

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

var starsRef = storageRef.child('fotos' + lafoto);

Here comes my "Problem", when I tried to download the image, the value of "lafoto" is gone, the url can be construct and there is no binding to my webpage image container , where I want to show the Photo

starsRef.getDownloadURL().then(function(url) {

console.log("la url ", url)

$scope.url = url }).catch(function(error) {

switch (error.code) {

case 'storage/object_not_found';

});

I already made a test, leaving storage reference and starsRef.getDownloadURL inside the setTimeout(function) and it works (part), my url is created correctly, BUT it is no binding to my web page. If I view the console.log, my url is ok, also if I click on it, show me the photo.

Any advice please?

Best regards,

Victor Rodriguez