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

Question

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.

Prasad K - Google · Accepted Answer · 2014-09-29 12:20:16Z

1

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

answered Sep 29, 2014 at 12:20

Prasad K - Google

2,5841 gold badge17 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related