helloworld
helloworld

Reputation: 965

TypeError: Cannot read property 'jquery' of undefined

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?

Upvotes: 7

Views: 34745

Answers (1)

Fabr&#237;cio Matt&#233;
Fabr&#237;cio Matt&#233;

Reputation: 70209

$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.

Upvotes: 12

Related Questions