Reputation: 965
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
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