How to give gif image for loading until response comes from backend

Question

HTML:

   <div class="row" 
ng-if="dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" >

            <div class="file-upload-wrapper">
                <div class="file-upload">
                    <img class="file-image" ng-src="{{imageSource}}" ng-if="imageSource"/>
                    <input type="file" file-model="image" name="file" class="file"/>
                </div>
                <div class="file-upload-text"> Upload Picture</div>
            </div>
            <div class="file-restriction-info">
                Maximum 5 Images can be attached.<br/>
                File size below 10MB. File Format jpeg & png
            </div>
            <div class="file-tags">
                <ul>
                    <li ng-repeat="image in files | filter :'image'" >
                        <div class="file-tag-baloon">
                            <span>
                                <a ng-click="getImage(image.id);">{{image.filename}}</a>
                            </span>
                            <span><a ng-click="removeImage(image.id)">x</a></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

JS:

 $scope.dataLoading = false;

$scope.uploadVideo = function( file ){

            var json = {
                "request": {
                    "service":{
                        "servicetype":servicetype,
                        "functiontype": "1012",
                        "session_id": session_id
                    },     
                    "data":{     
                        "rolename":rolename
                    }
                }
            };

                                        console.log(JSON.stringify(json));

            FileService.uploadFile( json, file ).then(function(res){
                        $scope.dataLoading = true;

                                console.log(JSON.stringify(res));

                if( res && res.status.code == 0 ) {
                    $scope.getVideo( res.data.mediaids[0] );
                    $scope.getAll();

                } else FlashService.Error(res.status.message,  true);

            });

Need to load dataloading image till response comes from the backend .I am using loading for video upload request. Since video uploading time is more. It will be good , if I use dataloading. Now I am unable to trigger the dataloading part. Need assistance

Answer 1

For this things I recommend using 'angular-busy'.

https://github.com/cgross/angular-busy

With this angular module you can add the promise to a scope object. This scope object you bind to the cg-busy directive which then shows a loading gif until the promise is resolved.

controller.js

$scope.uploadPromise = FileService.uploadFile(json, file).then(.....

view.html

<div cg-busy="uploadPromise">Successfully uploaded!!</div>
<!-- It shows a loading icon until the promise 'uploadPromise' is resolved. Then this <div> will be shown -->

It is also possible to add your own gif or svg.