[Vuejs]-How to impletement a progressbar which shows me the uploading % with xhr function

You can try this code below, it works in my side:

xhr : function() {
    var xhr = jQuery.ajaxSettings.xhr();
    if(xhr.upload) {
        if(xhr instanceof window.XMLHttpRequest) {
            var percentage = 0;
            xhr.upload.addEventListener('progress', function(e) {
                if(e.lengthComputable) {
                    percentage = e.loaded/e.total;
                    percentage = parseInt(percentage * 100);
                    // Do what ever you want after here
                }
            }, false);
        }
    }
    return xhr;
}

Basically, I was using xhr = jQuery.ajaxSettings.xhr() and xhr.upload.addEventListener progress to compute its progress percentage.

Hope this works.

now my xhr function is look like this.. if i get the value of percentage. i will bind that with my progressbar value. but i can not get any upload %

xhr: function() {
                                var xhr = jQuery.ajaxSettings.xhr();
                                console.log(xhr);
                                xhr.open('POST', this.url, false);
                                if (xhr.open) {
                                    console.log("xhr port open");
                                }
                                if (xhr.upload) {
                                    var percentage = 0;
                                    xhr.upload.addEventListener('progress', function(e) {
                                        if(e.lengthComputable) {
                                            percentage = e.loaded/e.total;
                                            percentage = parseInt(percentage * 100);
                                            // Do what ever you want after here
                                            console.log("percentage:"+percentage);
                                        }
                                    }, false);
                                }
                                return xhr;
                              //  console.log(xhr);
                            },

Finally it’s working for me. happy me 🙂

xhr: function () {
                                var xhr = new window.XMLHttpRequest();
                                xhr.upload.addEventListener("progress", function (evt) {
                                    if (evt.lengthComputable) {
                                        var percentComplete = evt.loaded / evt.total;
                                        percentComplete = parseInt(percentComplete * 100);
                                        console.log("% :" + percentComplete );
                                        $('.myprogress').text(percentComplete + '%');
                                        $('.myprogress').css('width', percentComplete + '%');
                                    }
                                }, false);
                                return xhr;
                            },