CODEWITHSUNDEEP
angularjs
Rajeev
Rajeev

Reputation: 46909

angularjs file object is undefined

Int the following code the file object is printing as undefined why?

Html

<input  type="file" name="issueFile" file-model="jsfile"> 
<a class="btn pull-right" ng-click="create()">Create</a>

controller

$scope.cancel = function () {
  var fd = new FormData();
  angular.forEach($scope.jsfile,function(file){
                fd.append('file',file);
 });
  fd.append('formdata',JSON.stringify(jsondata));
            $http.post('admin/managecuisineAdd',fd,{
                transformRequest:angular.identity,
                 headers:{'Content-type':undefined}
             }).success(function(data){
                 $scope.status=data;
                 $scope.itemlist.push(data)
                 $scope.message="New Dish Added Successfully"
  });
}

Upvotes: 1

Views: 3687

Answers (2)

Matt Herbstritt
Matt Herbstritt

Reputation: 4862

Angular won't bind to file inputs out of the box. You could try some ugly hack like this:

<input type="file" multiple onchange="angular.element(this).scope().fileNameChanged(this)">

Or use a directive like this https://github.com/danialfarid/ng-file-upload

Upvotes: 0

Alexandre Nucera
Alexandre Nucera

Reputation: 2223

As far as I know there is no support for input[type="file"] binding.

I use a custom directive triggering the change event and filling a variable.

.directive('ngFileSelect', [ '$parse', '$timeout', function($parse, $timeout) {
    return function(scope, elem, attr) {
            var fn = $parse(attr['ngFileSelect']);
            elem.bind('change', function(evt) {
                var files = [], fileList, i;
                fileList = evt.target.files;
                if (fileList != null) {
                    for (i = 0; i < fileList.length; i++) {
                        files.push(fileList.item(i));
                    }
                }
                $timeout(function() {
                    fn(scope, {
                        $files : files,
                        $event : evt
                    });
                });
            });
        };
    }])

In my HTML I use it like this : 

<input ng-file-select="onFileSelect($files)" type="file">

And in my controller :

$scope.onFileSelect = function (files) {
     console.info('files', files);
};

Upvotes: 2

Related Questions