How to show progressbar of file upload ?

Can you please tell me which hook I will be used for inject my xhr on progress event into your ajax call ? I have tried below code but not work.

add_action('wp_footer',function () {
    ?>
    <script>
        var wpcf7Elm = document.querySelector( '.wpcf7' );
        var progressbar = jQuery('.progress-bar');
        var statustxt = jQuery('#percent');
        wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {

           // alert( "Fire!" );
           //  var ajax
            //xhr: function() {
                var xhr = new window.XMLHttpRequest();
                console.log(xhr);
                xhr.upload.addEventListener("progress", function(event) {
                    console.log(event);
                    if (event.lengthComputable) {
                        var percentComplete = Math.round((event.loaded * 100) / event.total);
                        //upload progress
                        progressbar.width(percentComplete + '%') //update progressbar percent complete
                        statustxt.html(percentComplete + '%'); //update status text
                        // if(percentComplete>50) {
                        //     statustxt.css('color','#fff'); //change status text to white after 50%
                        // }
                    }
                }, false);

                return xhr;
            //},

        }, false );
	</script>
	<?php
},20);

but it doesnot fire on cf7 submit.