Upload images to firebase on form submit

I’m building a small web app (blog post alike) using AngularJs and Firebase. i implemented the addPost controller earlier and it worked good. After i wanted to add an input file inside the form which already implemented to upload images to firebase on form submit using ng-file-upload directive . As a new in angular i knew that firebase can save images as base64 but i couldn’t figur out how to make it work. Maybe some will say that its repeated question, but believe me i searched allover here i couldent find answer. Here is my form file :

<div class="container" ng-controller="AddPostCtrl">

    <form class="form-horizontal" ng-submit="AddPost(files)">
        <fieldset>

            <!-- Form Name -->
            <legend>Create Post</legend>

            <!-- Text input-->
            <div class="form-group">
                <label class="col-md-4 control-label" for="txtTitle">Title</label>
                <div class="col-md-4">
                    <input id="txtTitle" name="txtTitle" ng-model="article.title" type="text" placeholder="placeholder" class="form-control input-md">

                </div>

            </div>

            <!-- Textarea -->
            <div class="form-group">
                <label class="col-md-4 control-label" for="txtPost">Post</label>
                <div class="col-md-4">
                    <textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost"></textarea>
                </div>
            </div>

            <!-- Images -->
            <div class="form-group">
                <label class="col-md-4 control-label" for="pictures">Add Pictures</label>
                <div class="col-md-4">
                    <input id="pictures" type="file" ngf-select ng-model="files"  name="file"    
                      accept="image/*" ngf-max-size="2MB" ngf-multiple="true" ngf-keep="true" ngf-keep-distinct="true" class="btn btn-primary"/>
            <!-- Show image thumb and remove option -->
                    <span ng-repeat="file in files">
                       <img ngf-thumbnail="!file.$error && file" class="thumb"> <button class="btn btn-danger" ng-click="file = null" ng-show="file">Remove</button>
                    </span>
                </div>
            </div>

            <!-- Button -->
            <div class="form-group">
                <label class="col-md-4 control-label" for="singlebutton"></label>
                <div class="col-md-4">
                    <input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" />
                </div>
            </div>

        </fieldset>
    </form>


</div>

here is my controller :

angular.module(‘myApp.addPost’, [‘ngRoute’])

.controller(‘AddPostCtrl’, [‘$scope’,‘CommonProp’,‘$firebase’,‘$location’,‘Upload’,‘$timeout’, function($scope,CommonProp,$firebase,$location,Upload,$timeout) { if(!CommonProp.getUser()){ $location.path(‘/main’); }

/***** Add data to firebase *****/
$scope.AddPost = function(files) {
        var fb = new Firebase("https://hotelboard.firebaseio.com/Articles/");

        var title = $scope.article.title;
        var post  = $scope.article.post;
        var user  = CommonProp.getUser();
        var images = $scope.file ;
        fb.push({
            title:     title,
            post:      post,
            emailId:   user,
            images : images,
            '.priority': user

        },function(error) {
            if (error) {
                console.log("Error:",error);
            } else {
            console.log("Post set successfully!");
            console.log($scope.file);
            $location.path('/home');
            $scope.$apply();

        }

    });

}

}]);

and here is my GitHub for full project files

https://github.com/SaidThaher/HotelApp

If i get help with this issue , it will be more question regards to the result. PLEASE HELP

[kodfocus]

Hey guys, i have my image in firebase, but how i can decoded to show it in my view, i have this in Firebase:

• myNode
  • -K6Z1dsT7Ha9t-m20NXL
    • images
      • 0: “data:image/jpeg;base64,/9j/4Ru+RXhpZgAATU0AKgAA…”

in my view i have: ng-repeat=“p in myNodes” img data-ng-src=“data:image/jpeg;base64,{{ p.images }}” width=“100%” / /div

And in response i receive this message: GET data:image/jpeg;base64,[“data:image/jpeg;base64,/9j/4Ru+RXhpZgAATU0AKgAAAAg…U5Psv4fVf8Wv/gZQ/wDPQaf8xkb/AOw/3n/efbXbrPw8R/F8+kTeP9bF/afA3++vVOv/2Q==”] net::ERR_INVALID_URL

[danialfarid]

www.stackoverflow.com tag your question with ng-file-upload.