How to display progress info on console for video-uploading on S3?

Question

I am uploading video on a S3 bucket and would like to see the progress bar. So i coded :

reader.onload = function (e) {
    var rawData = reader.result;
    $.ajax({
          url: S3url,
          type: 'PUT',
          cache: false,
          processData: false,
          data: rawData ,
          async: false,  
          success: fnSuccess,
          error: fnError,
          crossDomain: true,
          contentType: "binary/octet-stream",
          xhr: function() {
                  console.log("xhr");
                  var xhr = new window.XMLHttpRequest();
                  xhr.upload.addEventListener("progress", function(evt) {
                      if (evt.lengthComputable) {
                          var percentComplete = evt.loaded / evt.total;
                          console.log(percentComplete);
                      }
                  }, false);
                  return xhr;
                },

    }, 'json');     //$.ajax({
};                //reader.onload = function 

But the percent is not displayed in the console.log. Any Idea ?

Answer 1

xhr should be $.ajaxSettings.xhr() instead of a new instance of XMLHttpRequest() see Upload multiple image using AJAX, PHP and jQuery