Search code examples
angularjsjsonangularjs-serviceangularjs-controllerangularjs-http

Retrieving data out of post success from separate controller angularjs


I am writing a simple service that uploads a file and posts it to a Spring controller. The controller manipulates this data and returns several objects as JSON. I am working with the following Angular service:

myApp.service('fileUpload', [ '$http', function($http) {
        this.uploadFileToUrl = function(file, uploadUrl) {
            var fd = new FormData();
            fd.append('file', file);

            $http.post(uploadUrl, fd, {
                transformRequest : angular.identity,
                headers : {
                    'Content-Type' : undefined
                }
            })

            .success(function(data) {
                console.log("upload successful")
                //console.log(data)
                namesandaddresses = data;
            })

            .error(function() {
                console.log("upload error")
            });
        }
    } ]);

I have a separate controller in the code that I want to use to post this data (namesandaddresses) to the view and use ng-repeat to display the information. My struggle right now is pulling the data outside of this success function, let alone the service itself. I have tried creating a global var namesandaddresses outside the service so that I can access it from another controller but it shows up as undefined.

From my research I have found the appropriate way to do this is to use a callback function but my attempts to write this into the service breaks the basic function. Before stepping back to redesign this service or reconsidering my approach I wanted to post this and see if the stackoverflow community could help me tweak this service so that I can post this JSON to the view upon success.

Would someone lend me a hand?


Solution

  • Its very easy.

    Controller:

    fileUpload.uploadFileToUrl (file,uploadUrl, {
                successCallBack: yourSuccessHandler,
                failureCallBack: yourFailureHandler
            });
    
    function yourSuccessHandler(data) {
                $scope.data= data; 
            }
    
    function yourFailureHandler() {
                console.log("Failed Messge printing from Controller"); 
            }
    

    Service

    myApp.service('fileUpload', [ '$http', function($http) {
            this.uploadFileToUrl = function(file, uploadUrl, options) {
                var fd = new FormData();
                fd.append('file', file);
    
                $http.post(uploadUrl, fd, {
                    transformRequest : angular.identity,
                    headers : {
                        'Content-Type' : undefined
                    }
                })
    
                .success(function(data) {
                    console.log("upload successful");
                    if(options && options.successCallBack) {
                        return options.successCallBack(data);
                    }
                })
    
                .error(function() {
                    console.log("upload error");
                    if(options && options.failureCallBack) {
                        return options.failureCallBack();
                    }
                });
            }
        } ]);