如何在AngularJS中上传文件？

Question

Can not create a file upload using AngularJS. There is a form:

<form ng-submit="getElem()" ng-repeat="elem in elems" class="update-form">
    <label for="name">Elem name: {{elem.name}}</label>
    <input type="file" id="file" name="file" />
    <button type="button" ng-click="addImage()" class="btn btn-success">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
        Add
    </button>
</form>

And I have a method in AngularJS:

 $scope.addImage = function () {
        $scope.data = 'none';
            var f = document.getElementById('file').files[0],
                r = new FileReader(),
                currentElem = this.elem.id;
            r.onloadend = function(e){
                $scope.data = e.target.result;
                var updateUrl = 'https://example/find' + currentElem + '/images';
                    $http.post(updateUrl, $scope.data)
                        .success(function (data, status, headers, config) {
                            console.info('Update image fine!');
                        });
            }
            r.readAsBinaryString(f);

After I click to "Add" Button, I have an error "TypeError: Failed to execute 'readAsBinaryString' on 'FileReader': parameter 1 is not of type 'Blob'." Why this happened? And How I can fix this, because I need to upload file?

Answer 1

Try below function

 $scope.add = function(){
  var f = document.getElementById('file').files[0],
      r = new FileReader();
  r.onloadend = function(e){
    var data = e.target.result;
    //send you binary data via $http or $resource or do anything else with it
  }
  r.readAsBinaryString(f);
}