CODEWITHSUNDEEP
htmlangularjshtml5-canvas
drew schmaltz
drew schmaltz

Reputation: 1584

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

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]);
        }
    }
}

Upvotes: 4

Views: 19581

Answers (2)

vladkras
vladkras

Reputation: 17228

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)

Upvotes: 0

Will M
Will M

Reputation: 2145

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.)

Upvotes: 6

Related Questions