Service showing undefined in angular

Question

I have wrote one service which will upload image to server and I am using that service from controller but on call to service showing that undefined function which is defined in service. and error is something like this "Cannot read property 'uploadFileToUrl' of undefined"

here is my code

app.service('fileUpload', ['$http', function ($http) {
    this.uploadFileToUrl = function(file,clientid, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        fd.append('id', clientid);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(response){
            console.log(response)
        })
        .error(function(){
        });
    }
}]);

and here i am calling this service

app.controller('settingsCtrl', ['$scope','apiCall','$filter', function($scope,apiCall,$filter,fileUpload){
    $scope.saveStudioBranch = function(){
        studio();
        admin();
        branch();
    }

    function studio(){
        var studio_json = {"session_id":session_id,"u":[{"col":"studio","val":$scope.studioDetails.studio},{"col":"type","val":$scope.studioDetails.type}],"filter":[["id","=","1"]],"table":"studio"};
        apiCall.callEndpoint(studio_json,"settingRoute.php","update",json_header).then(function(response){
            if(response.data.error == 0){
                if($scope.inst_logo != undefined ){
                    var uploadUrl = "https://papa.fit/routes/registrationRoute.php?action=instLogo";
                    -->> fileUpload.uploadFileToUrl($scope.inst_logo,session.client_id,uploadUrl);
                }
            }
            else
                show_snack(response.data.message);
        });

    }
});

I have added a arrow where I am calling service from

Show the code where are you injecting the service – Satpal Oct 10 '17 at 08:04 — Satpal, Oct 10 '17 at 08:04
ohh sorry . I will edit above code and please recheck it – SamD Oct 10 '17 at 08:05 — SamD, Oct 10 '17 at 08:05

Karim · Accepted Answer · 2017-10-10T11:06:53.520

4

the error is in the injection

app.controller('settingsCtrl', ['$scope','apiCall','$filter', 
  function($scope, apiCall, $filter, fileUpload){

you forgot to add fileUpload service inside the list of parameters

app.controller('settingsCtrl', ['$scope','apiCall','$filter', 'fileUpload',
  function($scope, apiCall, $filter, fileUpload){

edited Oct 10 '17 at 11:06

answered Oct 10 '17 at 08:13

Karim

8,454
3
25
33

Guillaume Roche-Bayard · Answer 2 · 2017-10-10T08:06:55.613

0

You must return your service, or else it would be undefined

  function uploadFileToUrlSrv($http) {

    var service = {};
    service.uploadFileToUrl = function(file,clientid, uploadUrl){
        var fd = new FormData();
        fd.append('file', file);
        fd.append('id', clientid);
        $http.post(uploadUrl, fd, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        })
        .success(function(response){
            console.log(response)
        })
        .error(function(){
        });
    }
    return service;
}

edited Oct 10 '17 at 08:06

answered Oct 10 '17 at 08:00

Guillaume Roche-Bayard

377
5
17

I didn't get you. can you explian in brief ? – SamD Oct 10 '17 at 08:03
@sameerdighe a service is a set of functions. You need to return your service as an object to use it in your controllers – Zooly Oct 10 '17 at 08:05
I've edited with a code sample what your service should look like, but in angular keep in mind that you **must** always return a service when you create it :) – Guillaume Roche-Bayard Oct 10 '17 at 08:05
@GuillaumeRoche-Bayard OP code related to service declaration is correct. Read [AngularJS : Factory and Service?](https://stackoverflow.com/questions/23074875/angularjs-factory-and-service) – Satpal Oct 10 '17 at 08:17

Service showing undefined in angular

2 Answers2