title: Upload images to firebase on form submit using ng-file-upload directive
body: <p>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 <strong>ng-file-upload directive</strong> . 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.<br>
  Here is my form file :</p>
  
  <pre><code>&lt;div class="container" ng-controller="AddPostCtrl"&gt;
  
          &lt;form class="form-horizontal" ng-submit="AddPost(files)"&gt;
              &lt;fieldset&gt;
  
                  &lt;!-- Form Name --&gt;
                  &lt;legend&gt;Create Post&lt;/legend&gt;
  
                  &lt;!-- Text input--&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="col-md-4 control-label" for="txtTitle"&gt;Title&lt;/label&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;input id="txtTitle" name="txtTitle" ng-model="article.title" type="text" placeholder="placeholder" class="form-control input-md"&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Textarea --&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="col-md-4 control-label" for="txtPost"&gt;Post&lt;/label&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost"&gt;&lt;/textarea&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Images --&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="col-md-4 control-label" for="pictures"&gt;Add Pictures&lt;/label&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;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"/&gt;
                  &lt;!-- Show image thumb and remove option --&gt;
                          &lt;span ng-repeat="file in files"&gt;
                             &lt;img ngf-thumbnail="!file.$error &amp;&amp; file" class="thumb"&gt; &lt;button class="btn btn-danger" ng-click="file = null" ng-show="file"&gt;Remove&lt;/button&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Button --&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="col-md-4 control-label" for="singlebutton"&gt;&lt;/label&gt;
                      &lt;div class="col-md-4"&gt;
                          &lt;input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/fieldset&gt;
          &lt;/form&gt;
  
  
      &lt;/div&gt;
  </code></pre>
  
  <p>here is my controller : </p>
  
  <pre><code>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();
  
              }
  
          });
        });
      }
  
  }]);
  </code></pre>
  
  <p>and here is my GitHub for full project files</p>
  
  <p><a href="https://github.com/SaidThaher/HotelApp" rel="nofollow">https://github.com/SaidThaher/HotelApp</a></p>
  
  <p>If i get help with this issue , it will be more question regards to the result.
  PLEASE HELP  </p>
  
  <p>Update : 
  @danialfarid updated the directive and made my day :) </p>
  
  <p>Upgrade to 8.0.6 and move your fb push here:</p>
  
  <pre><code>Upload.base64DataUrl(files).then(function(base64Urls) {
    fb.push({...
              images : base64Urls,
          },...
  });
  </code></pre>
  
  <p>I updated the code too.</p>