XMLHttpRequest request on images always return a total of 0

I use the following code to load image from CF IPFS:

let init = function(){

Image.prototype.load = function( url, callback ) {

  let thisImg = this,

  xmlHTTP = new XMLHttpRequest();
  thisImg.completedPercentage = 0;
  xmlHTTP.abort()
  xmlHTTP.open( 'GET', url , true );
  xmlHTTP.responseType = 'arraybuffer';

  xmlHTTP.onload = function() {
      var h = xmlHTTP.getAllResponseHeaders(),
          m = h.match( /^Content-Type:\s*(.*?)$/mi ),
          mimeType = m[ 1 ] || 'image/png';
      var blob = new Blob( [ this.response ], { type: mimeType } );
      thisImg.src = window.URL.createObjectURL( blob );
      if ( callback ) callback( this );

  };

  xmlHTTP.onprogress = function( e ) {
      if ( e.lengthComputable )
          thisImg.completedPercentage = parseInt( ( e.loaded / e.total ) * 100 );
          if(thisImg.parentNode.querySelector(".progress-txt")){
            thisImg.parentNode.querySelector(".progress-txt").innerHTML = "Loading HD: "+thisImg.completedPercentage+"%"
            thisImg.parentNode.querySelector(".progress-bar").style.width = thisImg.completedPercentage+"%"
          }
  };

  xmlHTTP.onloadstart = function() {
      thisImg.completedPercentage = 0;
  };

  xmlHTTP.onloadend = function() {
      thisImg.completedPercentage = 100;
      thisImg.parentNode.querySelector(".progress").classList.remove("show")
      if(thisImg.parentNode.querySelector(".progress-txt")){
        thisImg.parentNode.querySelector(".progress-txt").innerHTML = "Loading HD: 100%"
        thisImg.parentNode.querySelector(".progress-bar").style.width = "100%"
      }
  }
  xmlHTTP.send();
};
}

In the onprogress event, e.total always return 0, if i just change the gateway to another one, like infura, it work and the total is correct. Any idea why is that?

This topic was automatically closed 5 days after the last reply. New replies are no longer allowed.