Adding array of images to Firebase using AngularFire

Posted by user2833143 on Stack Overflow See other posts from Stack Overflow or by user2833143
Published on 2013-10-27T23:53:43Z Indexed on 2013/10/28 3:54 UTC
Read the original article Hit count: 1155

Filed under:
|
|

I'm trying to allow users to upload images and then store the images, base64 encoded, in firebase. I'm trying to make my firebase structured as follows:

  • |--Feed
  • |----Feed Item
  • |------username
  • |------epic
  • |---------name,etc.
  • |------images
  • |---------image1, image 2, etc.

However, I can't get the remote data in firebase to mirror the local data in the client. When I print the array of images to the console in the client, it shows that the uploaded images have been added to the array of images...but these images never make it to firebase. I've tried doing this multiple ways to no avail. I tried using implicit syncing, explicit syncing, and a mixture of both. I can;t for the life of me figure out why this isn;t working and I'm getting pretty frustrated. Here's my code:

$scope.complete = function(epicName){


                for (var i = 0; i < $scope.activeEpics.length; i++){
                    if($scope.activeEpics[i].id === epicName){
                        var epicToAdd = $scope.activeEpics[i];

                    }
                } 


                var epicToAddToFeed = {epic: epicToAdd, username: $scope.currUser.username, userImage: $scope.currUser.image, props:0, images:['empty']};

                //connect to feed data
                var feedUrl = "https://epicly.firebaseio.com/feed";
                $scope.feed = angularFireCollection(new Firebase(feedUrl));

                //add epic
                var added = $scope.feed.add(epicToAddToFeed).name();

                //connect to added epic in firebase
                var addedUrl = "https://epicly.firebaseio.com/feed/" + added;
                var addedRef = new Firebase(addedUrl);
                angularFire(addedRef, $scope, 'added').then(function(){

                    // for each image uploaded, add image to the added epic's array of images
                    for (var i = 0, f; f = $scope.files[i]; i++) {
                        var reader = new FileReader();
                        reader.onload = (function(theFile) {
                            return function(e) {
                                var filePayload = e.target.result;
                                $scope.added.images.push(filePayload);
                            };
                        })(f);
                        reader.readAsDataURL(f);
                    } 
                });
            } 

EDIT: Figured it out, had to connect to "https://epicly.firebaseio.com/feed/" + added + "/images"

© Stack Overflow or respective owner

Related posts about image

Related posts about angularjs