Angular Input Upload - Get file name and upload

Question

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

Gracia · Accepted Answer · 2016-02-15 07:09:11Z

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.net/um8p6pd7/2/

Good luck!

Uday Shankar Singh · Accepted Answer · 2016-02-15 06:08:43Z

0

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.

answered Feb 15, 2016 at 6:08

Uday Shankar Singh

5311 gold badge5 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular Input Upload - Get file name and upload

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related