angularjs file object is undefined

Question

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

Is there any reason you are using a local var instead of just using $scope.myFile? — ajmajmajma
– ajmajmajma, Commented Jul 16, 2015 at 12:58

Alexandre Nucera · Accepted Answer · 2015-07-16 13:07:31Z

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

Matt Herbstritt · Accepted Answer · 2015-07-16 13:09:52Z

0

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

answered Jul 16, 2015 at 13:09

Matt Herbstritt

4,8825 gold badges29 silver badges33 bronze badges

Collectives™ on Stack Overflow

angularjs file object is undefined

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