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:

Form (View):

<div class="item-input"> 
 <!--list item-->  
 <div data-ng-repeat="user in users"> 

    Username: <input type="text" placeholder="Enter the event name" name="username" ng-model="user.username" required> 

    Password: <input type="password" placeholder="Enter the password" name="password" ng-model="user.password" required> 

    Email: <input type="text" placeholder="Enter the email" name="email" ng-model="user.email" required> 

    Hometown: <input type="text" placeholder="Enter your hometown" name="hometown" ng-model="user.hometown" required> 

    Firstname: <input type="text" name="firstname" ng-model="user.firstname" required> 

    Lastname: <input type="text" name="lastname" ng-model="user.lastname" required>

    Birthday: <date-picker ng-model="user.birthday"></date-picker>

    Image:  <input type="file" name="file" ng-model="filename"> 
        <button ng-click="upload(file)">Upload</button>   

    <button class="button button-block button-positive" ng-click="editprofile(user)">
     Edit Account
    </button>

    <button class="button button-block button-positive" ng-click="deleteprofile()">
     Delete Account
    </button>

 </div>

Controller

.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
   }
 }); 

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:

Form (View):

<div class="item-input"> 
 <!--list item-->  
 <div data-ng-repeat="user in users"> 

    Username: <input type="text" placeholder="Enter the event name" name="username" ng-model="user.username" required> 

    Password: <input type="password" placeholder="Enter the password" name="password" ng-model="user.password" required> 

    Email: <input type="text" placeholder="Enter the email" name="email" ng-model="user.email" required> 

    Hometown: <input type="text" placeholder="Enter your hometown" name="hometown" ng-model="user.hometown" required> 

    Firstname: <input type="text" name="firstname" ng-model="user.firstname" required> 

    Lastname: <input type="text" name="lastname" ng-model="user.lastname" required>

    Birthday: <date-picker ng-model="user.birthday"></date-picker>

    Image:  <input type="file" name="file" ng-model="filename"> 
        <button ng-click="upload(file)">Upload</button>   

    <button class="button button-block button-positive" ng-click="editprofile(user)">
     Edit Account
    </button>

    <button class="button button-block button-positive" ng-click="deleteprofile()">
     Delete Account
    </button>

 </div>

Controller

.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
   }
 }); 

• javascript
• angularjs
• file-upload
• input
• upload

2 Answers 2

I've created a sample uploading of image using angularjs. It retrieves the image and it's filename. I hope it may helps you.

HTML:

 <div ng-app="test">
    <div ng-controller="UploadCtrl">
     Image:
     <input type="file" name="file" onchange="angular.element(this).scope().photoChanged(this.files)" />
     <img ng-src="{{ thumbnail.dataUrl }}" /> <!--Display the image -->
 </div>

Controller:

angular.module('test', []);
angular.module('test') .controller('UploadCtrl', function($scope, $timeout) {

// Read the image using the file reader 
$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function(files) {
  if (files != null) {
    var file = files[0];
     if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
      $timeout(function() {
        var fileReader = new FileReader();
        fileReader.readAsDataURL(file); // convert the image to data url. 
        fileReader.onload = function(e) {
          $timeout(function() {
            $scope.thumbnail.dataUrl = e.target.result; // Retrieve the image. 
          });
        }
      });
    }
  }
};
});

JS Fiddle: https://jsfiddle/um8p6pd7/2/

Good luck!

You need to use $cordovaFileTransfer for uploading the file to the server. Install the $cordovaFileTransfer plugin and then you will be able to upload file to the server and at the server side you need to make the path to get the file and save it on to the folder.