Anthony Anthony - 1 year ago 80
AngularJS Question

How to show a spinner until the result is back from the server

I'm using ng-file-upload to upload multiple files to the server. The server responds back after a while (~10 seconds). In this time I would like to show a spinner on the screen.

I'm currently showing a spinner like this

<img src="http://www.ajaxload.info/cache/ff/ff/ff/00/00/00/8-0.gif"/>


but it is there permanently. How can I make it so that it appears only for the time until the response is back from the server?

my upload code follows:

Upload.upload({
url: 'http://localhost:8080/myapp',
data: {
files: files
}
}).then(function (response) {
$timeout(function () {
$scope.result = response.data;
$scope.text = response.data.text;
$scope.notext = response.data.notext;
});
}, function (response) {
if (response.status > 0) {
$scope.errorMsg = response.status + ': ' + response.data;
}
}, function (evt) {
$scope.progress =
Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});

Answer Source

If I got you right...

html:

<img src="http://www.ajaxload.info/cache/ff/ff/ff/00/00/00/8-0.gif" ng-hide="loaderHidden"/>   

js:

$scope.loaderHidden = true;

function upload() {

   $scope.loaderHidden = false;
   Upload.upload({
            url: 'http://localhost:8080/myapp',
            data: {
                files: files
            }
        }).then(function (response) {
            $timeout(function () {
                $scope.loaderHidden = true;

                $scope.result = response.data;
                $scope.text = response.data.text;
                $scope.notext = response.data.notext;
            });
        }, function (response) {
            if (response.status > 0) {
                $scope.errorMsg = response.status + ': ' + response.data;
            }
        }, function (evt) {
            $scope.progress = 
                Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
        });
}

then just call upload()

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download