How to sync update value in angularjs

Question

I'm pretty new to angular so here goes. I have an upload avatar and a thumbnail to show the image of the uploaded avatar. My problem is how to update the thumbnail of the newly uploaded avatar. Coz as of right now I would have to refresh the page first before I can see the changes.

Here's some code in my controller:

//get avatar
$scope.userAvatar = function() {
    Api.getAvatar($scope.security.currentUser.email)
    .then(function(result) {
        //success
        $scope.avatarImage = result.config.url;
    }, function(result) {
        //errors
        console.log(result);
    });
}

//validate avatar then upload avatar
$scope.validateAvatar = function(files) {
    var fd = new FormData();
    if(files.length > 0) 
    {
        $scope.filesize = files[0].size;
        $scope.filemaxsize = 25 * 1024;
        $scope.$apply();

    //Take the first selected file
    fd.append("avatarImage", files[0]);
        $scope.uploadAvatar = function() {
            Api.uploadAvatar($scope.security.currentUser.email, fd)
            .then(function(result) {
                console.log(result.data);
                //$scope.avatarImage = result.config.url; ////doesn't update the $scope.avatarImage
                //$scope.userAvatar(); //doesn't update the $scope.avatarImage
                Api.getAvatar($scope.security.currentUser.email)
                .then(function(result) {
                    //success
                    console.log('uploaded Image');
                    $scope.avatarImage = result.config.url;
                });
            }, function(result) {
                console.log(result);
            })
        };  
    }
};

and on my partials

<div id="show-avatar" class="col-sm-3 col-sm-offset-3">
    <img id="avatarbox" ng-src="{{avatarImage}}" >
</div>

On my controller code above I validate the chosen image first if its not more than 25kb I show the upload button. I included the code on how I upload my avatar maybe it may help on my problem.

Return the path or name of image from the server and update the source of the image in the callback. — tymeJV
– tymeJV, Commented Aug 28, 2013 at 15:19
hmm, the return of the uploadAvatar is just a success message. And for the callback I included the $scope.userAvatar(); after the success callback in my uploadAvatar. But it didn't work. :( — user2720708
– user2720708, Commented Aug 28, 2013 at 15:27
Is te name of the image contained anywhere in the result.data? — tymeJV
– tymeJV, Commented Aug 28, 2013 at 15:38
@tymeJV, nope. The response are these: Object {status: "Uploaded", message: "Avatar for player [email protected] saved."}. I'm been reading about $broadcast, $on, $emit, $rootScope but aren't helpful enough for a newbie :( — user2720708
– user2720708, Commented Aug 28, 2013 at 15:46
Yeah, on the right track, you have to run the entire API call again Api.getAvatar($scope.security.currentUser.email) .then(function(result) { in the callback, then set the result.config.url inside that — tymeJV
– tymeJV, Commented Aug 28, 2013 at 15:59

user2720708 · Accepted Answer · 2013-08-29 06:37:06Z

1

okay, i solved my own problem with the below code.

$scope.validateAvatar = function(files) {
    var fd = new FormData();
    if(files.length > 0) 
    {
        $scope.filesize = files[0].size;
        $scope.filemaxsize = 25 * 1024;
        $scope.avatarImage = '';            
        //Take the first selected file
        fd.append("avatarImage", files[0]);
        $scope.uploadAvatar = function() {
            Api.uploadAvatar($scope.security.currentUser.email, fd)
            .then(function(result) {
                $scope.userAvatar();
            }, function(result) {
                console.log(result);
            })
        };  
        $scope.$apply();
    }
};

I reset the $scope.avatarImage then assign it again using the $scope.userAvatar();.

answered Aug 29, 2013 at 6:37

user2720708

4952 gold badges9 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

How to sync update value in angularjs

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