Angular Input Upload - Get file name and upload
<p>I'm trying to create an image upload feature for a user profile update part of an Ionic/Angular application. The upload feature is part of the form and I am unable to retrieve the image and the filename. How would I get both items? Below is my code: </p>

<p>Form (View): </p>

<pre><code>&lt;div class="item-input"&gt; 
 &lt;!--list item--&gt;  
 &lt;div data-ng-repeat="user in users"&gt; 

    Username: &lt;input type="text" placeholder="Enter the event name" name="username" ng-model="user.username" required&gt; 

    Password: &lt;input type="password" placeholder="Enter the password" name="password" ng-model="user.password" required&gt; 

    Email: &lt;input type="text" placeholder="Enter the email" name="email" ng-model="user.email" required&gt; 

    Hometown: &lt;input type="text" placeholder="Enter your hometown" name="hometown" ng-model="user.hometown" required&gt; 

    Firstname: &lt;input type="text" name="firstname" ng-model="user.firstname" required&gt; 

    Lastname: &lt;input type="text" name="lastname" ng-model="user.lastname" required&gt;

    Birthday: &lt;date-picker ng-model="user.birthday"&gt;&lt;/date-picker&gt;

    Image:  &lt;input type="file" name="file" ng-model="filename"&gt; 
        &lt;button ng-click="upload(file)"&gt;Upload&lt;/button&gt;   

    &lt;button class="button button-block button-positive" ng-click="editprofile(user)"&gt;
     Edit Account
    &lt;/button&gt;

    &lt;button class="button button-block button-positive" ng-click="deleteprofile()"&gt;
     Delete Account
    &lt;/button&gt;

 &lt;/div&gt;
</code></pre>

<p>Controller</p>

<pre><code>.controller('ProfileUpdateCtrl', function($http, $state, $http, $cordovaOauth, $stateParams, $rootScope, $scope, UserFac) {  
   //removed the working features to focus on the uploading part. 
   $scope.upload = function(file) {  
      var filename = $scope.file.name; 
      //need to know how to get the data of the image and save as formdata
   }
 }); 
</code></pre>