XMLHttpRequest upload onprogress - request sent finishes too fast and spends too much time at TTFB

Question

I have created an application to upload pictures for further processing. Everything works fine, except for the upload progress bar.

function upload (fData) {
        $.ajax({
            url: '@Url.Action("UploadFile", "Home")',
            type: 'POST',
            mimeType: 'multipart/form-data',
            headers: { '__RequestVerificationToken': $("input[name=__RequestVerificationToken]").val() },
            data: fData,
            contentType: false,
            processData: false, 
            xhr: function () {
                var xhr = $.ajaxSettings.xhr();
                xhr.upload.onprogress = function (evt) {
                    uploadProgress = evt.loaded / evt.total * 100;
                    $(bar).css('width', uploadProgress + '%');complete');
                };
                return xhr;
            }
        })

Actually, the progress calculation works fine if I use the chrome throttling functionality. After the upload finishes the server does some work and returns with the response. Everything works as desired.

Without throttling the upload finishes instantly... at least it appears to finish instantly. I can track the upload using wireshark or simply debug the server code. The data is not there, but the loaded value is instantly = the total value. I have the same behavior using Edge.

I think the same problem, but with a different setup was described here.