0

I have an ajax image upload on my site which isn't working in IE. The first problem I noticed is that the "FormData" type was undefined in IE. I came across the workaround I'm using in the ajax call below. However, the ajax call is only returning the error function when clicking upload, never hitting my controller action "UpdateAvatar". Works perfect in every other browser. Does anyone have any experience with this?

<div class="modal-body">
    <input type="file" name="UploadFile" id="uploadfile">
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
    <button type="button" id="updateAvatarBtn" class="btn-success btn">Upload</button>
</div>

$('#updateAvatarBtn').click(function (event) {
    var file = $('#uploadfile').get(0).files;

    if (typeof FormData == "undefined") {
        var data = [];
        data.push('data', JSON.stringify(file));
    }
    else {
        var data = new FormData();
        data.append("file", file[0]);
    }
    $.ajax({
        url: 'AccountSetup/updateAvatar',
        type: 'POST',
        contentType: false,
        processData: false,
        data: data,
        success: function (response) {
            $('#imgPreview').attr("src", response);
            $('#uploadImageModal').modal('hide');
            toastr.success('Image Upload Successful');
        },
        error: function () {
            toastr.error('Image Upload Unsuccessful. Please try again.');
        }
    })
})
noclist
  • 1,659
  • 2
  • 25
  • 66

1 Answers1

0

The first problem I noticed is that the "FormData" type was undefined in IE.

That's the main problem. You cannot upload files using AJAX in IE <= 9. For those old versions of IE you will need to resort to more ancient techniques like for example using the jquery.form plugin. This plugin detects the browser type and version and if it finds out a legacy browser it will fallback to hidden iframes or flash because that's only way you can simulate AJAX file uploads in those legacy browsers.

This being said personally I wouldn't bother with those archaic browsers. I would rather perform feature detection and if the browser doesn't support native HTML5 FormData I would simply inform the user that his experience will be degraded because of his use of such legacy browser and simply perform a normal file upload using a full postback to the server.

Community
  • 1
  • 1
Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • You're right, it is working in versions of IE newer than 9. I was thinking it was IE in general. – noclist Nov 23 '15 at 21:29
  • Actually >= IE10 will work just fine because it supports `FormData`. So the problem is not a related to IE, it's related to using an old version of it which simply doesn't support this particular feature (among others). You would have encountered the same problem if you used an older version of FireFox or Google Chrome. The thing is that those browsers make it harder for the end user to use an old version. – Darin Dimitrov Nov 23 '15 at 21:31
  • Could you provide an example of how I could determine if the browser doesn't support FormData and revert to a normal file upload in that case? – noclist Nov 23 '15 at 21:36
  • Sure, you already have this in your code: `if (typeof FormData == "undefined")`. The only change you need to do is to use a normal `submit` button instead of a normal button so that you could just leave the standard form submit action execute in case the browser doesn't support FormData. If the browser supports FormData then you would simply return false from the submit handler of the form to which you subscribed and perform the AJAX call you already have. – Darin Dimitrov Nov 23 '15 at 21:37
  • So basically you can think first how you could make your code work in a normal way ()think javascript disabled) and then you will make the necessary unobtrusive enhancements for the browsers that support FormData. This means that you need to start with a standard `
    ` tag, an `
     – Darin Dimitrov Nov 23 '15 at 21:42
  • Thank you, will give it a shot. – noclist Nov 23 '15 at 21:53