Missing $firebase.storage() in Angularfire 1.X

[Jim]

Hi all,

I'm working on a pretty old project right now. It's built in Angular 1.4 and uses these firebase libraries:

"firebase": "^2.4.1",
"angularfire": "~1.1.4",

It makes heavy use of the "Firebase" api, and I'd rather not refactor the entire project if I don't have to. hehe.

The problem is that now we want to introduce Firebase storage, and I can't figure out what api you are expected to use in firebase 1.X.

I tried injecting $firebase into my controller/service, but it seems that there are no storage methods on that. Also, for some reason there was never a $firebaseStorage service (someone please correct me, but I think this is because the actual storage product that firebase offers began after the 1.x library was created).

Anyway, can someone point me towards the easiest way to implement storage on this older project (I'm sure I'm not the only one wondering about this)? Thanks!

[Patrick Kishino]

Hey,
in my project I use storage as well and it's not too hard.
in my firebase factory i create a config with auth/db/storage urls and api key..
then initialise it as normal.
in the code for storage i use this

function fetchUrl(url, label) {
    var storage = firebase.storage();
    var storageRef = storage.ref();
    return storageRef.child(url).getDownloadURL().then(function(urlLong) {
        return {
            url: urlLong,
            label: label
        };
    }).catch(function(error) {
        console.log(error);
        throw {
            message: error.code,
            status: error.status,
            data: error
        };
    });
}

and to store:

upload(siteKey) {
        var vm = this;
        var storageRef = firebase.storage().ref();
        vm.images.forEach(function(image) {
            var metadata = { contentType: image.type };
            var name = siteKey + image.name;
            vm.uploadtype = 'info';
            var uploadTask = storageRef.child('media/' + name).put(image, metadata);
            uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
                function(snapshot) {
                    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
                    vm.uploadvalue = Math.floor(progress);
                    vm.scope.$apply();
                    switch (snapshot.state) {
                        case firebase.storage.TaskState.PAUSED: // or 'paused'
                            console.log('Upload is paused');
                            break;
                        case firebase.storage.TaskState.RUNNING: // or 'running'
                            console.log('Upload is running');
                            break;
                    }
                },
                function(error) {
                    switch (error.code) {
                        case 'storage/unauthorized':
                            // User doesn't have permission to access the object
                            break;

                        case 'storage/canceled':
                            // User canceled the upload
                            break;

                        case 'storage/unknown':
                            // Unknown error occurred, inspect error.serverResponse
                            break;
                    }
                },
                function() {
                    vm.uploadtype = 'success';
                });
        });
    }

[Jim]

Hey thanks!

But where are you getting that variable "firebase" from?

On Oct 4, 2016 11:09 AM, "Patrick Kishino" [e-mail] wrote:

Hey,
in my project I use storage as well and it's not too hard.
in my firebase factory i create a config with auth/db/storage urls and api
key..
then initialise it as normal.
in the code for storage i use this

function fetchUrl(url, label) {
var storage = firebase.storage();
var storageRef = storage.ref();
return storageRef.child(url).getDownloadURL().then(function(urlLong) {
return {
url: urlLong,
label: label
};
}).catch(function(error) {
console.log(error);
throw {
message: error.code,
status: error.status,
data: error
};
});
}

and to store:

upload(siteKey) {
var vm = this;
var storageRef = firebase.storage().ref();
vm.images.forEach(function(image) {
var metadata = { contentType: image.type };
var name = siteKey + image.name;
vm.uploadtype = 'info';
var uploadTask = storageRef.child('media/' + name).put(image, metadata);
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
function(snapshot) {
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
vm.uploadvalue = Math.floor(progress);
vm.scope.$apply();
switch (snapshot.state) {
case firebase.storage.TaskState.PAUSED: // or 'paused'
console.log('Upload is paused');
break;
case firebase.storage.TaskState.RUNNING: // or 'running'
console.log('Upload is running');
break;
}
},
function(error) {
switch (error.code) {
case 'storage/unauthorized':
// User doesn't have permission to access the object
break;

                    case 'storage/canceled':
                        // User canceled the upload
                        break;

                    case 'storage/unknown':
                        // Unknown error occurred, inspect error.serverResponse
                        break;
                }
            },
            function() {
                vm.uploadtype = 'success';
            });
    });
}

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
#856 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFGys8HnuZmpRw91Gi2cCVhx-1mytKdEks5qwmv_gaJpZM4KNmjm
.

[Jacob Wenger]

The firebase variable is either already global (assuming you do a script include) or can be imported via import * as firebase from 'firebase' if you are using a bundler.

Note that #785 tracks a proposal to add first-class support for Firebase Storage to AngularFire. In the meantime, dropping down to the vanilla JavaScript SDK as @pkishino suggests is your best bet.

[Patrick Kishino]

yes, as @jwngr mentioned I am getting it from a bundler.

[Jim]

ok thanks guys. I will try this out.

btw - I'm using bower to load in firebase and angularfire (repo here: https://github.com/ng-nj/ng-nj.org)

[Jim]

I just tried, am I'm happy to say that I was able to access regular old firebase without adding any imports.