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:

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

1 Answers