angular.js: ReferenceError: up is not defined

Question

I'm working on upload function for my project, my button are including functions upload and submit. As soon as I click on upload I'm getting a error in developer console:

angular.js:13236 ReferenceError: up is not defined

reference on this error says that the problem in this line

$scope.$watch("up.file", function() { if (up.file) up.submit() });

exactly in if (up.file) but in meantime, everything works fine. Upload function works and all files are uploading. So I appreciate if someone could explain me where is my mistake?

  app.controller('uploadCtrl',['$scope', '$http','Upload','$window',function($scope, $http,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

            //console.log(vm.file.name);
            vm.upload(vm.file); //call upload function
            //vm.file.name = prompt("put you name");
        }
        $scope.$watch("up.file", function() { if (up.file) up.submit() });
    };

    vm.upload = function (file) {
        Upload.upload({
            url: '/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.');
            } 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
            setTimeout(10000);
        }).then (function() {
            $http.get('/compare').success(function() {
                setTimeout(function() { alert("success!"); }, 5000);
                // url was called successfully, do something
                // maybe indicate in the UI that the batch file is
                // executed...
            });
        });
    };
}]);

up.file isn't declared anywhere, I think like loan said you mean if(vm.file)... — haakon.io
– haakon.io, Commented Apr 22, 2016 at 17:00
@haakon319 I fixed and now getting angular.js:13236 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [[{"msg":"up.file","newVal":{}}],[{"msg":"up.file","newVal":"..."}],[{"msg":"up.file","newVal":"..."}],[{"msg":"up.file","newVal":"..."}],[{"msg":"up.file","newVal":"..."}]] — Anton
– Anton, Commented Apr 22, 2016 at 17:11

Ioan · Accepted Answer · 2016-04-22 17:14:59Z

1

up variable is not defined in your controller. Instead, vm is defined.

So, use vm.file and vm.submit.

Edit: You are defining your watch expression in the submit method, and you are calling the submit method from the watch expression.

You should define the watch outside of the submit method, like the following:

    vm.submit = function(){ //function to call on form submit
        if (vm.upload_form.file.$valid && vm.file) {//check if from is valid

            //console.log(vm.file.name);
            vm.upload(vm.file); //call upload function
            //vm.file.name = prompt("put you name");
        }
    };

    $scope.$watch("vm.file", function() { if (vm.file) vm.submit() });

edited Apr 22, 2016 at 17:14

answered Apr 22, 2016 at 17:00

Ioan

5,1873 gold badges33 silver badges51 bronze badges

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

2 Comments

Anton Over a year ago

Now I'm getting angular.js:13236 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Watchers fired in the last 5 iterations: [[{"msg":"up.file","newVal":{}}],[{"msg":"up.file","newVal":"..."}],[{"msg":"up.file","newVal":"..."}],[{"msg":"up.file","newVal":"..."}],[{"msg":"up.file","newVal":"..."}]]

Ioan Over a year ago

@Anton I'm glad that it helped.

Collectives™ on Stack Overflow

angular.js: ReferenceError: up is not defined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related