ASP.NET Core - progressbar on form submit

Question

I have a simple web page with form for uploading files. Everything works fine, but I need to use some overlay progressbar. I have problem with refreshing the progressbar itself. I was trying to use method posted in this question. But it does not work for me, as I am not using ajax itself. Can someone point me in the right direction?

My submit method:

$("#uploader-form").on("submit", function (e) {
    e.preventDefault();
    showPopup();

    this.addEventListener("formdata", function (event) {
        var uploader = $("#file-uploader").dxFileUploader('instance');
        event.formData.set("MyFiles", null); // dxFileUploader's "Name" option value
        for (var i = 0; i < uploader._files.length; i++) {
            event.formData.append("File" + i.toString(), uploader._files[i].value);
        }
    });
  
    this.submit();
  
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function (evt) {

        if (evt.lengthComputable) {
            refreshProgressBar(evt.total, evt.loaded);
        }
    }, false);  
});

Progress bar show up, files upload as expected, but the progress bar never refresh.

Thank you.

Answer 1

XMLHttpRequest itself is ajax. If you only want to use XMLHttpRequest to upload files, here is the example.

<p>
  select file:
  <input type="file" id="ipt-file" />
  <button type="button" id="btn-upload">upload</button>
</p>
<div class="progress-bar">
  <div class="progress" id="progress"></div>
</div>
<p id="info"></p>
     
@section Scripts{

  <script>
    var button = document.querySelector("#btn-upload"),
        input = document.querySelector("#ipt-file"),
        progress = document.querySelector("#progress"),
        info = document.querySelector("#info");

        var upload = function () {
            if (input.files.length === 0) {
                console.log("No file selected");
                return;
            }

        var formData = new FormData();
        formData.append("file", input.files[0]);

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                info.innerHTML = xhr.responseText;
            }
        };

        xhr.upload.addEventListener("progress", function (event) {
            if (event.lengthComputable) {
                progress.style.width = Math.ceil(event.loaded * 100 / event.total) + "%";
            }
        }, false);

        xhr.open("POST", "/home/get");
        xhr.send(formData);
    };

    button.addEventListener("click", upload, false);
  </script>
}