angular error: $http.post is not a function

Question

I am trying to post file on my server as soon as it will get attached with directve so I did api call but I got this error while doing. I don't know where am i going wrong

here is my code

app.directive('fileModel',fileupload);

fileupload.$inject =  ['$http','$parse']; 

function fileupload ($http,$parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs,$http) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function($http){
                    modelSetter(scope, element[0].files[0]);
                    var fd = new FormData();
                    fd.append('file', element[0].files[0]);
                    fd.append('id', user_id);
                    var uploadUrl = "https://******/routes/contactRoute.php?action=upload";
                    $http.post(uploadUrl, fd, {
                        transformRequest: angular.identity,
                        headers: {'Content-Type': undefined}
                    }).
                    then(function successCallback(response) {
                        console.log(response)
                      }, function errorCallback(response) {
                        console.log(response)
                    });
                });
            });
        }
    };
}

Ved · Accepted Answer · 2017-07-11 15:38:18Z

3

Remove $http from link function. it is not needed

app.directive('fileModel',fileupload);

fileupload.$inject =  ['$http','$parse']; 

function fileupload ($http,$parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function(){
                scope.$apply(function($http){
                    modelSetter(scope, element[0].files[0]);
                    var fd = new FormData();
                    fd.append('file', element[0].files[0]);
                    fd.append('id', user_id);
                    var uploadUrl = "https://******/routes/contactRoute.php?action=upload";
                    $http.post(uploadUrl, fd, {
                        transformRequest: angular.identity,
                        headers: {'Content-Type': undefined}
                    }).
                    then(function successCallback(response) {
                        console.log(response)
                      }, function errorCallback(response) {
                        console.log(response)
                    });
                });
            });
        }
    };
}

Edit 1: You also need to remove $http from $apply callback. You don't need to pass $http to any other internal function. It has been already injected and available for all other internal methods.

scope.$apply(function(){}

edited Jul 11, 2017 at 15:38

answered Jul 11, 2017 at 15:32

Ved

12.1k5 gold badges46 silver badges61 bronze badges

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

4 Comments

SamD Over a year ago

Still same error @Ved $http.post is not a function at summaryController.js:19

bhantol Over a year ago

@ved answer should also work but needs some tweaking and verifying. Check my answer - notice $http removed from the $scope.apply as well

SamD Over a year ago

Thanks @Ved . you made my day.

Ved Over a year ago

@sameerdighe Welcome. Happy to help.

Collectives™ on Stack Overflow

angular error: $http.post is not a function

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related