使用Php和Jquery将文件上传到AWS S3时显示进度条

Question

I am using AWS S3 to store my web application's file like videos and images, the framework of application was CodeIgniter.

The flow of my system to upload file is like this: AJAX > PHP > AWS

I can successfully upload the file to a bucket by using Php SDK provided by AWS, but I had a problem while displaying a progress bar.

Using xhr event listener to show progress bar is only tracking the upload progress of local server, is not for the AWS S3 upload status. This will become even progress bar is 100% but AWS S3 haven't completed yet.

So my question is how to track the AWS S3 upload progress percentage and display it at html code?

I hope can display the progress status like:

15% of 100% uploaded ( << This will live update )

Thanks for all.

** Controller **
public function Ajax_uploadmedia()
{
  if($_SERVER['REQUEST_METHOD'] === 'POST')
  {
     if(empty($_FILES['video_attach']['name'])){ echo 'Video File cannot be empty'; exit(); }

     $fileExtension = get_file_ext($_FILES['video_attach']['name']);
     $newfilename = uniqid();
     $config['upload_path']   = UPLOAD_PATH.'/videos/';
     $config['allowed_types'] = 'mp4|mov';
     $config['file_name']      = $newfilename;
     $this->load->library('upload', $config);
     if($this->upload->do_upload('video_attach'))
     {
        $uploadData = $this->upload->data();

        // AWS S3 Upload Process
        $this->load->library('Awslib');
        $objAwsS3Client = $this->awslib->initial();
        $uploadedFilePath =(UPLOAD_PATH.'/videos/'.$uploadData['file_name']);
        $objAwsS3Client->putObject(array(
           'Bucket' => 'gpstudysys',
           'Key'    => 'videos/'.$uploadData['file_name'],
           'Body'   => fopen($uploadedFilePath, 'r'),
           'ACL'    => 'public-read'              
        ));

     }
  }
}

Jquery Ajax Request

  $('#update_media_form').on('submit', function(e){
    e.preventDefault();
    var formData = new FormData($(this)[0]);

    $.ajax({
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener("progress", function(event) {
                if (event.lengthComputable) {
                    var percentComplete = (event.loaded / event.total)*100;

                    var percentDisplay = Math.round(percentComplete);
                    $('#percent_progress').text(percentDisplay+'%');
                    $('#percent_progress').attr('aria-valuenow', percentDisplay);
                    $('#percent_progress').attr('style', 'width: '+percentDisplay+'%');

                }
           }, false);
           return xhr;
        },
        type: 'POST',
        url: '<?php echo base_url(); ?>url_to/ajax/upload_media',
        cache: false,
        contentType: false,
        processData: false,
        data: formData,
        //dataType: 'json',
        complete:function(){
            console.log("Request finished.");
        },
        success: function(response){
            // callback(response);
        }
    });
});