How to integrate a progress bar into angularjs directive with file upload - html

Question

I need to create a progress bar for file uploads. I know my progress event listener is working. Is there are more "angular way" to be doing this? How can I update the progress bar from inside my event listener?
As a preface, please feel free to correct and critique the general logic flow if it too needs help.
I have this canvas...
<canvas id="progress"></canvas>
I have an angularjs directive that uploads files. I added a progress event listener (only showing relevant parts)...
link: function postLink(scope, element, attrs, ctrl) {
var fileUpload = function (img, file) {
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
// UPDATE THE PROGRESS BAR HERE
}
}, false);
}
element.bind('change', function (evt) {
var files = evt.target.files;
var canvas = document.getElementById("progress"),
context = canvas.getContext("2d");
context.fillStyle = 'lighgray';
context.fillRect(0, 0, 200, 18);
context.moveTo(0, 0);
context.fillStyle = 'darkgray';
context.fillRect(0, 0, 1, 18);
for(var i = 0; i < files.length; i++) {
fileUpload(files, files[i]);
}
}
}

Answer 1

Have a look at Angular UI Bootstrap: http://angular-ui.github.io/bootstrap/
It provides directives for Bootstrap UI elements including the progress bar.
It looks like you'd just have to bind the upload progress value with the bar, and it will automatically update.
(Gotta love two-way data binding.)

Answer 2

take a look at HTML5 progress tag, your code will look like
if (e.lengthComputable) {
var percentage = Math.round((e.loaded * 100) / e.total);
$('progress').val(percentage);
}
I do know it has many problems with compatibility and it looks different in different browsers (though you can fix it using css3: nice example)
in your case you should fill rectangle again and again
if (e.lengthComputable) {
var percentage = e.loaded / e.total;
context.fillRect(0, 0, progressWidth*percentage, 18);
}
I get rid of *100% because you'd better use var progressWidth = 200 when you create context
look this example, it shows better what I mean (and sorry for my English)