I am uploading a file to Azure when the user clicks on the confirm dialog box. The content can be imagery, videos, or Excel and other file types.

It takes time while upload so during this time I want to show a progress bar. After successfully uploading I want to hide the progress bar. Can you please help me with it?

<div class="progress">
  <div id="progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
    <div id="label" class="control-label">0%</div>
  </div>
</div>

document.getElementById("dialogBtn").onclick = function() {
  ej.popups.DialogUtility.confirm({
    title: ' Confirmation Dialog',
    content: "Are you sure you want to upload images into Azure and Update DB",
    okButton: {
      text: 'OK',
      click: function() {
        okClickInsert();
        this.hide();
      }
    },
    cancelButton: {
      text: 'Cancel',
      click: ClickTest
    },
    showCloseIcon: true,
    closeOnEscape: true,
    animationSettings: {
      effect: 'Zoom'
    }
  });
};

function okClickInsert() {
  // Other Code

  $.ajax({
    url: "@Url.Action("UploadFilesinAzure", "UploadFiles")",
    data: JSON.stringify(UPLOADToAzure),
    type: "POST",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    beforeSend: onProgress,
    complete: onComplete,
    success: function(data) {
      location.reload();
    },
    error: function(data) {}
  });
}

function onProgress(args) {
  document.querySelector("body").style.visibility = "hidden";
  document.querySelector("#progress").style.visibility = "visible";
}

function onComplete(args) {
  document.querySelector("#progress").style.display = "none";
  document.querySelector("body").style.visibility = "visible";
};

[HttpPost]
public async Task<bool> UploadFilesinAzure([Frombody]...) {
  // Other validation  code
  await DoUploadFileOnlyAsync(FILE Details);
}