Ajax file upload, 'progress' upload event does not fire in Edge browser

Question

I'm developing a file upload control that posts form data via ajax.

I have this working cross browser in Chrome, Firefox, IE 11, 10. However in the Microsoft Edge browser, the upload 'progress' event does not appear to fire.

Can anyone point out why and tell me if there is a work around in Edge?

Please see below JavaScript snippet and following HTML.

JavaScript:

...
uploadFile: function () {

    var self = this;

    var fileName = $('#file-input').val();

    if (fileName) {

        $('#file-upload-submit').attr('disabled', 'disabled');

        // Browsers create a path with 'C:\fakepath in, which is not useful
        // and needs to be stripped out

        fileName = fileName.replace('C:\\fakepath\\', '');

        var s3Key = self.s3KeyPrefix + self.createUuid() + '/' + fileName;

        $('#s3-key').val(s3Key);

        var fileExtension = self.getFileExtension(fileName);

        var contentType;

        if (fileExtension) {

            // Find the content type by extension

            for (var i = 0; i < self.contentTypeMap.length; i++) {

                if (fileExtension === self.contentTypeMap[i][0]) {

                    contentType = self.contentTypeMap[i][1];
                }
            }
        }

        contentType = contentType || 'text/plain';

        $('#content-type').val(contentType);

        var form = $('#file-upload');

        var xhr = new XMLHttpRequest();

        var handleUploadCommon = function () {

            $('#file-upload-submit').removeAttr('disabled', 'disabled');

            self.clearForm();

            self.clearProgress();

            self.clearCancelBtn();
        }

        var handleUploadProgress = function (e)
        {
            if (e.lengthComputable) {

                self.displayProgress(e.loaded, e.total);
            }
        }

        var handleUploadComplete = function ()
        {
            var url = self.s3BrowserLinkPrefix + '/' + s3Key;

            // Trigger callback

            if (self.callbacks.onFileUploaded) {
                self.callbacks.onFileUploaded(s3Key, url);
            }

            self.uploadedFiles.push({

                url: url,
                rendered: false
            });

            self.displayUploadedFiles();

            handleUploadCommon();
        }

        var handleUploadError = function ()
        {
            handleUploadCommon();

            console.error('An error occurred during file upload');
        }

        var handleUploadAbort = function ()
        {
            handleUploadCommon();
        }

        xhr.upload.addEventListener('progress', handleUploadProgress, false);
        xhr.upload.addEventListener('load', handleUploadComplete, false);
        xhr.addEventListener('error', handleUploadError, false);
        xhr.addEventListener('abort', handleUploadAbort, false);
        xhr.open('POST', form.attr('action'), true);
        xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
        xhr.send(new FormData(form[0]));

        if ($('#cancel-btn').length > 0) {

            $('#cancel-btn').css('display', 'inline');

            $('#cancel-btn').click(function () {

                // Cancel ajax upload and reset form

                xhr.abort();

                handleUploadAbort();
            });
        }
    }
},
displayProgress: function(loaded, total)
{
    // If elements exist, display text percentage and / or progress bar

    var pct = ((loaded / total) * 100) | 0; // | 0 coverts to int

    if ($('#progress-percent').length > 0)
    {
        $('#progress-percent').css('display', 'inline-block');

        $('#progress-percent-text').text(pct + '%');
    }

    if ($('#progress-bar').length > 0) {

        $('#progress-bar-inner').css('width', pct + '%');
    }
}
...

HTML:

<form id="file-upload" action="https://@(ViewBag.S3Bucket).s3.amazonaws.com/" method="post" enctype="multipart/form-data">

        <input type="hidden" id="s3-key" name="key" /><br />
        <input type="hidden" id="content-type" name="Content-Type" /><br />
        <input type="hidden" name="acl" value="@ViewBag.S3Acl" />
        <input type="hidden" name="AWSAccessKeyId" value="@ViewBag.AwsAccessKeyId" />
        <input type="hidden" name="Policy" value="@ViewBag.Policy" />
        <input type="hidden" name="Signature" value="@ViewBag.Signature" />

        <input id="file-input" type="file" name="file" /> <br />

        <div class="file-upload-submit-container">
            <input id="file-upload-submit" class="btn btn-primary" type="button" name="submit" value="Upload"/>
            <span id="progress-percent">
                <svg class="loader" width='20px' height='20px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><circle cx="50" cy="50" r="40" stroke="#bababa" fill="none" stroke-width="10" stroke-linecap="round"></circle><circle cx="50" cy="50" r="40" stroke="#707070" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"></animate><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate></circle></svg>
                <span id="progress-percent-text">0%</span>
            </span>
            <span id="cancel">
                <a id="cancel-btn">Cancel</a>
            </span>
        </div>
    </form>

Answer 1

This is a known issue of Edge 15, as you can check here. Anyone can reproduce the error with this fiddle.

xhr.upload.onprogress = updateProgress;
// I only added this code because stack overflow forced me!

As you can see, it only updates when reaching a hundred percent.

Update The Windows October seems to fix this bug on Edge (Windows Version 1809)