Upload images to firebase on form submit using ng-file-upload directive

Question

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 =     Upload.base64DataUrl(files).then(function(base64Urls){
            fb.push({
                title:     title,
                post:      post,
                emailId:   user,
                images : base64Urls,
                '.priority': user

            },function(error) {
                if (error) {
                    console.log("Error:",error);
                } else {
                console.log("Post set successfully!");
                console.log(images);
                $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

Update : @danialfarid updated the directive and made my day :)

Upgrade to 8.0.6 and move your fb push here:

Upload.base64DataUrl(files).then(function(base64Urls) {
  fb.push({...
            images : base64Urls,
        },...
});

I updated the code too.

Answer 1

Move your fb push here: Upload.base64DataUrl(files).then(function(base64Urls) { fb.push({... images : base64Urls, },... }); Upload.base64DataUrl will convert the files to base64 data url which then can be added to the json to be sent to the server.