TypeError: Upload.upload is not a function

Question

I have this function, and it throw exception:

$scope.uploadAvatar = function(avatar, user) {
   Upload.upload({
        url: 'api/v1/user' + user.id + '/',
        avatar: avatar,
        method: 'put'
    })
};

TypeError: Upload.upload is not a function

My scripts includes:

    <script src="/static/js/main.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/posts_controller.js"></script>
    <script src="/static/js/jquery.equalheights.min.js"></script>
    <script src="/static/js/video.js/video.js"></script>
    <script src="/static/js/swiper.jquery.min.js"></script>
    <script src="/static/ng-file-upload/FileAPI.js"></script>
    <script src="/static/ng-file-upload/ng-file-upload.js"></script>
    <script src="/static/ng-file-upload/ng-file-upload-all.js"></script>
    <script src="/static/ng-file-upload/ng-file-upload-shim.js"></script>
    <script src="/static/ng-file-upload/ng-file-upload.js"></script>

So I did inject 'Upload' in my controller and 'ngFileUpload' in module My controller:

myApp.controller('ShowsListController', ['$scope', '$http', '$routeParams', '$location', '$route', 'Upload', function ($scope, $http, $routeParams, $route, Upload) {

    $http.get('/api/v1/shows/').success(function (data) {
        $scope.shows = data;
    });


    $http.get('/check_login/').success(function (data) {
        $scope.mediaurl = data.mediaUrl;
        $scope.user = data;

    });



    $http.get('/api/v1/actors/').success(function (data) {
        $scope.actors = data;
    });

    $http.get('/api/v1/users/').success(function (data) {
        $scope.users = data;
    });


    $scope.uploadAvatar = function (avatar, user) {

        Upload.upload({
            url: 'api/v1/users' + user.id + '/',
            avatar: avatar,
            method: 'put'
        })
    };

}]);

Add my controller with these function

Answer 1

In your controller declaration, you injected $location after $routeParams but you forgot to pass it in the function.

Since you are using inline array annotation, you need to keep the annotation array in sync with the parameters in the function declaration itself.

myApp.controller('ShowsListController', ['$scope', '$http', '$routeParams', '$location', '$route', 'Upload', function ($scope, $http, $routeParams, $location, $route, Upload) {
 // your current code
}

See docs for more info.