10

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>
Improve this question
2
  • can you provide fiddle? Commented May 13, 2017 at 8:16
  • 1
    No, it's too difficult to extract the server code. However I have tested other file uploaders like the one on github.com, and the FineUploader JS component, and I can see they all suffer the same. Seems like it's an issue with Edge to me. Commented Jul 3, 2017 at 17:02

1 Answer 1

Reset to default
10

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)

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

workarounds? fixes? still seems to be a problem in 41.16299.15.0 (16.16299)
@behelit Depending on how much time you want to spend, it should be possible to hack together your own upload using websockets and the File API ;). Seems like the xhr alternative fetch api does not have progress exposed yet.
Does this work for you now? I just tried and it still fails on Edge for me.
Correct, i confirm that it works after installing the latest windows updates :-)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.