Angularjs file upload doesn't work ($files is undefined)

Question

I use danialfarid library fileUpload.

https://github.com/danialfarid/angular-file-upload And i do same things like in "Usage article on GitHub page", but i have an error after i chose file: "Uncaught TypeError: Cannot read property 'length' of undefined" and this undefined is $files.

Here is my Controller:

$scope.onFileSelect = function($files) {
  console.log($files); // undefined
//$files: an array of files selected, each file has name, size, and type.
for (var i = 0; i < $files.length; i++) {
  var file = $files[i];
  $scope.upload = $upload.upload({
    url: '/cards/avatar/save_from_disk', //upload.php script, node.js route, or servlet url
    data: {myObj: $scope.myModelObj},
    file: file,
  }).progress(function(evt) {
    console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
  }).success(function(data, status, headers, config) {
    // file is uploaded successfully
    console.log(data);
  });
}

};

And in my view:

<input type="file" title="" accept="image/*"  ng-file-select="onFileSelect($files)" class="upload" />

sylwester · Accepted Answer · 2014-09-03 10:53:50Z

2

More likely you missed something please see working example that should helps: http://plnkr.co/edit/fbALEktGuyDY2CNUrwrL?p=preview

JS:

var app = angular.module('plunker', ['angularFileUpload']);

app.controller('MainCtrl',['$scope', '$upload', function($scope, $upload) {


    $scope.onFileSelect = function($files) {


      console.log($files); // undefined
      //$files: an array of files selected, each file has name, size, and type.
      for (var i = 0; i < $files.length; i++) {
        var file = $files[i];
        $scope.upload = $upload.upload({
          url: '/cards/avatar/save_from_disk', //upload.php script, node.js route, or servlet url
          data: {
            myObj: $scope.myModelObj
          },
          file: file,
        }).progress(function(evt) {
          console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
        }).success(function(data, status, headers, config) {
          // file is uploaded successfully
          console.log(data);
        });
      }
    };
  }
]);

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>

    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.2.22/angular.js" data-semver="1.2.22"></script>
      <script src="http://angular-file-upload.appspot.com/js/angular-file-upload.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

    <input type="file" title="" accept="image/*"  ng-file-select="onFileSelect($files)" class="upload" />
  </body>

</html>

edited Sep 3, 2014 at 10:53

answered Sep 3, 2014 at 10:37

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

thisninja Over a year ago

Yep, just the same. Paradox is that my example works in local disk perfectly.

sylwester Over a year ago

are you minify your js files on live server ?

thisninja Over a year ago

Yes, i minify code for server. And also use array notation for dependencies. I solved the problem. :facepalm: I have two ngFileSelect directives and the last (from other module) one overrides first one.

Collectives™ on Stack Overflow

Angularjs file upload doesn't work ($files is undefined)

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related