How to show Progress in XMLHttpRequest

Question

I used XMLHttpRequest to upload the file and I want to display a LoadingView before submitting the file, but LoadingView does not appear and does not work.

I use Asp.net MVC for coding.

In JavaScript:

// For display Loading View
function updateProgress(oEvent) {
  if (oEvent.lengthComputable) {                            
    //Loading
  } else {

  }
}

$('body')
  .on('click', '#bUpload', function() {


    var xmlHttpRequest = new XMLHttpRequest();
    if (!window.XMLHttpRequest) {
      xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlHttpRequest.addEventListener("progress", updateProgress);

    xmlHttpRequest.open("POST", '@Url.Action("****", "****", new {area = "****"})', true);                    

    xmlHttpRequest.send();

 });

Answer 1

You can add Event Listeners to your xmlHttpRequest.

MDN has a very good documentation on this.

Monitoring progress