I am trying to include a file upload in my project here is my html part
<form ng-app="fileUpload" ng-controller="MyCtrl as up" name="up.upload_form">
Single Image with validations
<input
type="file"
ngf-select
ng-model="up.file"
name="file"
ngf-pattern="'image/*'"
accept="image/*"
ngf-max-size="20MB"
/>
Image thumbnail: <img style="width:100px;" ng-show="!!up.file" ngf-thumbnail="up.file || '/thumb.jpg'"/>
<i ng-show="up.upload_form.file.$error.required">*required</i><br>
<i ng-show="up.upload_form.file.$error.maxSize">File too large
{{up.file.size / 1000000|number:1}}MB: max 20M</i>
<!-- Multiple files
<div class="button" ngf-select ng-model="up.files" ngf-multiple="true">Select</div>
Drop files: <div ngf-drop ng-model="up.files" class="drop-box">Drop</div> -->
<button type="submit" ng-click="up.submit()">submit</button>
<p>{{up.progress}}</p>
</form>
my controller is
angular.module('fileUpload', ['ngFileUpload'])
.controller('MyCtrl',function(Upload,$window){
var vm = this;
vm.submit = function(){ //function to call on form submit
if (vm.upload_form.file.$valid && vm.file) { //check if from is valid
vm.upload(vm.file); //call upload function
}
};
vm.upload = function (file) {
Upload.upload({
url: 'http://localhost:3000/upload', //webAPI exposed to upload the file
data:{file:file} //pass file as data, should be user ng-model
}).then(function (resp) { //upload function returns a promise
if(resp.data.error_code === 0){ //validate success
$window.alert('Success ' + resp.config.data.file.name + 'uploaded. Response: ');
} else {
$window.alert('an error occured');
}
}, function (resp) { //catch error
console.log('Error status: ' + resp.status);
$window.alert('Error status: ' + resp.status);
}, function (evt) {
console.log(evt);
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
vm.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress
});
};
});
the file upload html is inside my main module myApp
<body ng-app="myApp" ng-controller="MyController">
when i run the file the file upload controller is showing error http://errors.angularjs.org/1.5.0-beta.2/ng/areq?p0=MyCtrl&p1=not%20aNaNunction%2C%20got%20undefined at Error (native)
Thanks in Advance
You should not have another
ng-appdeclaration on the same page if your want those controllers to be a part of ONE the same application - remove thisng-app="fileUpload". Then you will have structure in your HTML like this:So you can call
MyControllerfunctions fromMyCtrlusing$scope.$parent, read more here: AngularJS access parent scope from child controller