JavaScript Adding this Progress Bar script code to existing upload code

[chrisj]

I am looking for assistance with how to integrate this Progress Bar script code to my successfully working upload code. Here's the progress bar script code:

$(document).ready(function(){
    // File upload via Ajax
    $("#uploadForm").on('submit', function(e){
        e.preventDefault();
        $.ajax({
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener("progress", function(evt) {
                    if (evt.lengthComputable) {
                        var percentComplete = ((evt.loaded / evt.total) * 100);
                        $(".progress-bar").width(percentComplete + '%');
                        $(".progress-bar").html(percentComplete+'%');
                    }
                }, false);
                return xhr;
            },
            type: 'POST',
            url: 'upload.php',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData:false,
            beforeSend: function(){
                $(".progress-bar").width('0%');
                $('#uploadStatus').html('<img src="images/loading.gif"/>');
            },
            error:function(){
                $('#uploadStatus').html('<p style="color:#EA4335;">File upload failed, please try again.</p>');
            },
            success: function(resp){
                if(resp == 'ok'){
                    $('#uploadForm')[0].reset();
                    $('#uploadStatus').html('<p style="color:#28A74B;">File has uploaded successfully!</p>');
                }else if(resp == 'err'){
                    $('#uploadStatus').html('<p style="color:#EA4335;">Please select a valid file to upload.</p>');
                }
            }
        });
    });

And here is my existing, successfully working upload code:

        function uploadFile() {
            // create FormData
          var fileType = 'video'; // or "audio"
          var fileName = 'vid.webm';
          var formData = new FormData();
          var request = new XMLHttpRequest;
          formData.append(fileType + '-filename', fileName);
          formData.append(fileType + '-blob', blob);
          request.open("POST", "/save1.php");

         request.onreadystatechange = function() {
         if(request.readyState==4) {
         alert(request.responseText);
         }
        }

            request.send(formData);
       }

Any assistance is appreciated