I am trying to dynamically resize a div when an event is fired from S3.
In the code below, I pass the progress variable to the updateProgress function as a parameter. This function resides in the top scope of my Angular controller.
s3.upload(params).on('httpUploadProgress', function(evt) {
var progress;
progress = Math.floor(evt.loaded * 100 / evt.total);
updateProgress(progress);
})
.send(function(err, res, data) {
if (err) {
growl.error("We're having trouble uploading your image. Please try again!", {title: 'Whoops!', ttl: 5000});
console.log('Error uploading' + err);
} else {
imgLocation = res.Location;
postToFirebase(imgLocation);
}
});
Here's the updateProgress function I am using:
function updateProgress(percent) {
$scope.progressBar = {
'width': percent + '%'
}
}
HTML
<div ng-style="progressBar" class="shot__image--post__progress"></div>I am able to successfully log the AWS event and the progress value, but for some reason, the width of the div never changes when I upload the image.