JQuery File Upload (blueimp) with a custom progress bar

Question

I'm just getting started with blueimp's JQuery File Upload and for design purposes I wanted to incorporate a circular progress bar.

I'm unexperienced with JQuery but I did put my hands on a circular progress bar script that does simply and exactly what I was looking for.

My problem is I can't figure out the way to incorporate it into JQuery File Upload.

Here is how the default progress bar looks like in JQueryFU :

<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div>

<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('body').append('<img src="' + URL.createObjectURL(data.files[0]) + '" width="150" height="150"/>');
                $('<span/>').text(file.name).appendTo(".upload-name");
            });
        },
        dropZone: $('#avatar-drop'),
        replaceFileInput: false,
        progressall: function (e, data) {   // <-- progress-bar function starting here
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }
    });
});
</script>

And here I what I use for my custom progress bar :

<div id="circle"></div>

<script>
$('#circle').circleProgress({
    value: 0.75,
    size: 150,
    fill: { color: "#60bbff" }
    });
</script>

So what I'm looking for is a way to make JQueryFU set the value of my custom progress bar (instead of the 0.75 manually set) the same it does for its original progress bar. How can I achieve that ?

I'm not entirely sure I'm explaining this well, please let me know if more details are requiered. Thanks for your help.

Cristhian Valencia · Accepted Answer · 2016-06-15 17:01:59Z

1

progressall: function (e, data) {   // <-- progress-bar function starting here
    var progress = data.loaded * 1.0 / data.total;
    $('#circle').circleProgress({
        value: progress,
        size: 150,
        fill: { color: "#60bbff" }
    });
}

answered Jun 15, 2016 at 17:01

Cristhian Valencia

351 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

JQuery File Upload (blueimp) with a custom progress bar

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