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 stackoverflow.com/questions/28382927/… The question wasn't the same as yours but the solution will work for you. — jbrown
– jbrown, Commented Oct 30, 2017 at 19:21

Hareesh · Accepted Answer · 2017-10-30 20:05:15Z

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, 2017 at 20:05

answered Oct 30, 2017 at 19:21

Hareesh

6,9005 gold badges36 silver badges62 bronze badges

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

4 Comments

Pares Over a year ago

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 Over a year ago

yes it worked inside the service. I am getting the message inside that service .then function.

Pares Over a year ago

It looks like my service gets an exception thrown in the end. That's why it never exists out of the service

Pares Over a year ago

Posted the problem here stackoverflow.com/questions/47024002/…

amanpurohit · Accepted Answer · 2017-10-30 19:21:44Z

0

.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.!

answered Oct 30, 2017 at 19:21

amanpurohit

1,29611 silver badges20 bronze badges

2 Comments

Pares Over a year ago

I tried this. when I do $scope.messagedisplay=fileUpload.uploadFileToUrl(file, uploadUrl) I get $scope.messagedisplay as undefined.

amanpurohit Over a year ago

@Pares assign value to message display using fileUpload.uploadFileToUrl(file, uploadUrl).then(function (response) { $scope.messagedisplay = response; })

Collectives™ on Stack Overflow

How to use scope variable from a service in angularJS

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related