I use danialfarid library fileUpload.
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" />
I use danialfarid library fileUpload.
https://github./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" />
1 Answer
Reset to default 2More 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/1.2.22/angular.js" data-semver="1.2.22"></script>
<script src="http://angular-file-upload.appspot./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>