PROGRESS BAR IS NOT WORKING, GIVES ME 100% AT ONCE BEFORE THE FILE UPLOAD

this ajax has written in my method:

$.ajax({ //async: false, url: "file/upload", type: "POST", data: formData, cache: false, dataType: 'json', // what to expect back from the PHP script contentType: false, processData: false,

                xhr: function() {
                    var xhr = new XMLHttpRequest();
                    xhr.upload.addEventListener("progress", function (evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = Math.round((evt.loaded / evt.total)* 100);
                            //Do something with upload progress
                            console.log('percentComplete : '+percentComplete);
                            vm.progress = percentComplete;

                        }
                    }, false);
                    console.log(xhr);
                    return xhr;
                },
                complete:function(){
                    console.log("Request finished.");
                },

                success: function (data) {
                   if ( data.status == false ){
                       window.location.replace('./');
                   }
                   else {

                       vm.datacv = data.file_id;
                       Materialize.toast("successfully uploaded !!!", 4000);
                   }
                },

            });

have tried many web sites, asked but i didn't get the the real upload %. using vue1.0 with laravel 5.5