Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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://myfirebaseurl.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://myfirebaseurl.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://myfirebaseurl.com/feed/" + added + "/images"

share|improve this question
    
How do you find the performance when images are stored? If you compress/scale down the images I would like to know what you do with them? –  Nick Lewis May 28 at 11:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.