How to use scope variable from a service in angularJS

Question

I want a message to be displayed on file upload success or failure on the UI. I have the following file structure.

Controller:

My file upload function is like this:

       $scope.uploadFile = function () {
                   //using a service
                   fileUpload.uploadFileToUrl(file, uploadUrl)
    };

This works perfectly fine. The fileUpload service looks like this:

       angular.module('myApp').service('fileUpload', ['$http', function  
     ($http) {


      //upload function happens here and returns a promise, This is     executing fine.
            .success(function (response) {
                if (response.status=="uploadSuccess")
                {
                    alert("The file has been successfully uploaded");
                    var message = "success";
                                        }
                if (response.status == "uploadFailure") {
                    alert("The file could not be uploaded");

                                      }
                if (response.status == "uploadFailureExc") {
                    alert("The file could not be uploaded due to an exception that occured");


                }
                if (response.status == "FileExists") {
                    alert("The file could not be uploaded - a file with that name already exists");

                                        }


            })
            .error(function () {

            });

    }
      }]);

How can I display a message on my html page instead of using alerts. I have tried to set a variable var message. and then returning it out of the service, but its going in some infinity loop and getting stuck. I have tried to use a scope variable and its also going in some infinite loop.

Help

Look at the accepted answer on this post https://stackoverflow.com/questions/28382927/listen-to-window-events-in-an-angularjs-service The question wasn't the same as yours but the solution will work for you. — jbrown, Oct 30 '17 at 19:21

Hareesh · Answer 1 · 2017-10-30T20:05:15.733

1

$http will trigger callback asynchronously when the response is available. you can use .then to get response from your Service

.then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
 }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
 });

and in your controller

fileUpload.uploadFileToUrl(file, uploadUrl).then(function(data) {
    console.log(data);
});

edited Oct 30 '17 at 20:05

answered Oct 30 '17 at 19:21

Hareesh

6,770
4
33
60

I just tried this. It does not go inside the successCallbark or errorCallback function when I debug this. so my message alert on the UI remains blank, – Pares Oct 30 '17 at 19:52
yes it worked inside the service. I am getting the message inside that service .then function. – Pares Oct 30 '17 at 20:01
It looks like my service gets an exception thrown in the end. That's why it never exists out of the service – Pares Oct 30 '17 at 20:51
Posted the problem here https://stackoverflow.com/questions/47024002/httpbadreq-bad-request-configuration-error – Pares Oct 30 '17 at 20:55

score 0 · Answer 2 · answered Oct 30 '17 at 19:21

.success(function (response) {
       if (response.status=="uploadSuccess")
       {
           var message = "The file has been successfully uploaded";
           return message;
    }
       if (response.status == "uploadFailure") {
           var message = "The file could not be uploaded";
           return message;
                             }
       if (response.status == "uploadFailureExc") {
           var message = "The file could not be uploaded due to an exception that occured";
           return message;

       }
       if (response.status == "FileExists") {
           var message = "The file could not be uploaded - a file with that name already exists";
           return message;

                               }


   })

Replace the on success block with this code which returns a message for every condition upon upload and now you can use it in your controller in whichever way you want to. Hope this helps.!

I tried this. when I do $scope.messagedisplay=fileUpload.uploadFileToUrl(file, uploadUrl) I get $scope.messagedisplay as undefined. — Pares, Oct 30 '17 at 19:53
@Pares assign value to message display using fileUpload.uploadFileToUrl(file, uploadUrl).then(function (response) { $scope.messagedisplay = response; }) — amanpurohit, Oct 31 '17 at 10:25

How to use scope variable from a service in angularJS

2 Answers2