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

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

Will M · Accepted Answer · 2013-07-25 02:39:30Z

6

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

answered Jul 25, 2013 at 2:39

Will M

2,1534 gold badges22 silver badges32 bronze badges

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

2 Comments

drew schmaltz Over a year ago

So what would the code look like assuming I had included the relevant javascript from UI Bootstrap? <progress percent="1"></progress> is the html...

Will M Over a year ago

Instead of var percentage use scope.percentage and bind with percent={{percentage}}.

vladkras · Accepted Answer · 2013-07-25 03:11:57Z

0

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)

answered Jul 25, 2013 at 3:11

vladkras

17.2k4 gold badges50 silver badges55 bronze badges

2 Comments

drew schmaltz Over a year ago

Checkout my edit to the question. My code to draw the progressbar is actually inside the onchange handler making var context unavailable within my upload function. How would you go about making it available?

vladkras Over a year ago

@drewschmaltz just put context higher to fileUpload function

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related