TypeError: Cannot read property 'jquery' of undefined

Question

I'm getting the following error in Chrome console,

TypeError: Cannot read property 'jquery' of undefined

Here is my javascript function,

<script type="text/javascript">
    var formApp = angular.module('formApp',[]);

    function formController($scope,$http){
        $scope.formData = {};

        $scope.processForm = function(){
            $http({
                method : 'POST',
                url : 'http://localhost:8080/ABCAPI/v1/image/front',
                data : $.param($scope.formData.imageFile),
                headers : {'Content-Type': "multipart/form-data" , 'Auth-Token' : "X"}
            }).success(function(data){
                console.log("");

                if (!data.success) {
                    // if not successful, bind errors to error variables

                } else {
                    // if successful, bind success message to message
                    $scope.message = data.message;
                }
            })
        };
    }

</script>

What does above error means and where did I go wrong?

The only jQuery you have in the sample is `$.param`, and nothing directly reads any `jquery` property there, so it seems a bit unlikely. — Fabrício Matté, Apr 18 '14 at 08:19
My bad, just noticed that `$.param(undefined)` throws your reported error. See answer below. — Fabrício Matté, Apr 18 '14 at 08:22
indeed, confused about the message i'm getting. any idea about the reason for that? — helloworld, Apr 18 '14 at 08:22

score 12 · Accepted Answer · edited May 23 '17 at 10:30

12

$scope.formData.imageFile seems to evaluate to undefined.

$.param(undefined) //throws Cannot read property 'jquery' of undefined

Do a console.log($scope.formData) right before the $http() call. The $scope.formData object most likely does not contain an imageFile property, or imageFile is null/undefined.

Note that $.param takes a plain object or array as the first argument, providing another type of value (or no value) falls under undefined behavior.

Also, if I'm reading your code correctly, you're trying to upload an image file through $http. It won't work that way, you need XHR2's FormData API. See this answer for a simple implementation.

Angular does not support ng-model on <input type="file">, which is the reason for the former error.

edited May 23 '17 at 10:30

Community

1
1

answered Apr 18 '14 at 08:21

Fabrício Matté

69,329
26
129
166

1

@dystroy yes, though `$.param(undefined)` is pretty much equivalent to `$.param()` (no arguments), and `$.param` has no documented zero-arguments signature. So it falls under undefined behavior, I guess. – Fabrício Matté Apr 18 '14 at 08:27
1

It might also be argued that we don't want jQuery to be overloaded with code only designed to let errors make sense. In any case, have an upvote for your diagnostic. – Denys Séguret Apr 18 '14 at 08:32
Yes, with error call stack and breakpoints we can solve these issues rather quickly nowadays. – Fabrício Matté Apr 18 '14 at 08:44

TypeError: Cannot read property 'jquery' of undefined

1 Answers1

Linked