CODEWITHSUNDEEP
javascriptangularjsamazon-web-servicesamazon-s3
sabari
sabari

Reputation: 2625

Amazon S3 upload image - track the Upload progress - Angular JS

I am using angular js to upload image to Amazon S3 .

My Controller.js-- [controller.admin.main]

 var req = bucket.putObject(params).on('httpUploadProgress', function(progress) {
                            $scope.progress = Math.round((progress.loaded * 100.0) / progress.total);
                        /* LINE 1 */ console.log($scope.progress);
                        }).send(function(err, data) {
                            console.log("FINISHED");
                            if (err) {
                                console.log(err.message);
                                return false;
                            } else {
                                console.log('File Uploaded Successfully');
                            }
                        });

My html page

  <div ng-show="progressVisible">
                       <!--Line 2--> <div class="percent">{{progress}}%</div>
                        <div class="progress-bar">
                          <!-- Line 3 -->  <div class="uploaded" ng-style="{width: {{progress}}%}"></div>
                        </div>
                    </div>

In Line 2 and Line 3, I dont get the 'progress' scope variable updated, as the update progresses. But I see the proper output in Line 1 CONSOLE.LOG statement.

Why is the scope variable not getting connected to the html? I am properly connecting this controller to my html page through my 'states.js'

**states.js**

.state("admin", {
                url: '',
                template: "../../../views/admin/home.html",
                controller: 'controller.admin.main'                
            })

I have other functions in my controller say 'upload' that is getting properly called from my html. So this ensures that the controller is properly connected to the html page. But why is the $scope.progress variable -value change not reflected in my html page. Some one please help . I am stuck for two days.

Thanks.

Upvotes: 0

Views: 625

Answers (1)

Prasad K - Google
Prasad K - Google

Reputation: 2584

Call $scope.$apply() when the scope changes

    $scope.progress = Math.round((progress.loaded * 100.0) / progress.total);
    if(!$scope.$$phase) {
      $scope.$apply()
    }

as it may be that the upload function is called outside angularjs scope. Calling $scope.$apply() will cause the digest cycle to run so the view changes

Upvotes: 1

Related Questions