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?

Answer 1

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