AngularJSのアップロードフォームを使用して画像をアップロードする

Question

簡単な質問、AngelsのアップロードフォームをParse.comに作成するにはどうすればいいですか？
にしようとしたとき、私はこのエラーを得た私は、このstackoverflow answerを使用して使用してプロフィール画像アップローダーフォームを作成しようとしていますが、それは

HTMLコード

<div class="col-lg-9" ng-controller="manageProfile"> 
    <form style="margin-top:80px"> 
     <div class="form-group"> 
      <label>Browse for Picture</label> 
      <input type="file" name="profPic" id="profPic"></input> 
     </div> 
     <button class="btn btn-md" ng-click="uploadPicture()">Upload Picture</button> 
    </form> 
</div> 

AngularJSコード

profile.controller('manageProfile', ['$scope', function($scope) { 
$scope.uploadPicture = function() { 
    var fileUploadControl = $("#profPic")[0]; 
    var file = fileUploadControl.file[0]; 
    var name = file.name; 
    var parseFile = new Parse.File(name, file); 

    parseFile.save().then(function() { 
     var currentUser = Parse.User.current(); 
     currentUser.set("profilePicture", parseFile); 
     currentUser.save(); 
    }, function(error) { 
     alert("Error: " + error.code + ' ' + error.message); 
    }); 
} 

の作品ではありませんアップロード

error: fileuploadcontrol is undefined 

Answer 1

AngularJSでは、入力要素はng-modelディレクティブを使用して入力をスコープ変数にバインドします。コントローラで

<div class="col-lg-9" ng-controller="manageProfile"> 
    <form style="margin-top:80px"> 
     <div class="form-group"> 
      <label>Browse for Picture</label> 
       <!-- add ng-model directive --> 
      <input ng-model="fileName" type="file" name="profPic" id="profPic"></input> 
     </div> 
     <button class="btn btn-md" ng-click="uploadPicture()">Upload Picture</button> 
    </form> 
</div> 

：ng-modelについて詳しく

profile.controller('manageProfile', ['$scope', function($scope) { 
    $scope.uploadPicture = function() { 
     /* replace this 
     var fileUploadControl = $("#profPic")[0]; 
     var file = fileUploadControl.file[0]; 
     var name = file.name; 
     */ 
     //Use ng-model variable 
     var name = $scope.fileName; 
     // 
    }; 

}]); 

、AngularJS ng-model Directive API Referenceを参照。