IE jquery async file upload request pending

Question

I have created a new multiple drag drop file upload control with progress bar. It works great with all browsers, except an issue with IE 10 and above.

When I upload files in IE, most of times jquery async request will not complete. It shows pending. I can see it is pending in IE network debugger window. But in all other browsers it work well. I am clueless what is wrong here. Initally I thought it might be something related to caching. But after adding below parameters on server response. It still goes in pending state

context.Response.AppendHeader("Cache-Control", "no-cache"); // HTTP 1.1
context.Response.AppendHeader("Pragma", "no-cache"); // HTTP 1.1 

for (var i = 0; i < files.length; i++) {
        var data = new FormData();
        data.append(files[i].name, files[i]);
        uploadFile(handlerurl, data);
    }
function uploadFile(handlerurl, formData) {
                var jqXHR = $.ajax({
                    type: 'POST',
                    url: handlerurl,
                    contentType: false,
                    processData: false,
                    async: true,
                    cache: false,
                    data: formData,                         
                    xhr: function () {   },
                    success: function (result, status, xhr) {   },
                    error: function (xhr, status, error) {   }
          });
}

I am calling this function per file. I am not sure what is wrong with IE.

Edit : After debugging, found out that server breakpoint will hit. but there is no files in context.Request.Files. No files send from jquery/AJAX. You can reproduce this issue by keep upload same file again and again.

Answer 1

Problem

While looking for fileupload options via ajax and without posting the whole form, we often come across code in the internet using FormData API, which works perfectly fine on chrome and mozilla but not on IE.

Solution

So the idea is to point the target of the form to an iframe and even bind a load event to the iframe so that you know when the upload is finished and write additional jquery functions. Also you can even hide the iframe and not show the user. But this solution works on IE as well. The code is as below

The code also shows how to post additional data along with the file post.

@{
    ViewBag.Title = "Index";
}
<script src="~/scripts/jquery-1.9.1.min_.js"></script>
<script type="text/javascript">
    function successFunction() {
        alert($('#my_iframe').contents().find('p').html());
    }
    function redirect() {
        //debugger;
        document.getElementById('my_form').target = 'my_iframe'; //'my_iframe' is the name of the iframe
        //document.getElementById('my_form').submit();
        var callback = function () {
            if (successFunction)
                successFunction();
            $('#frame').unbind('load', callback);
        };

        $('#my_iframe').bind('load', callback);
        $('#hfParam').val('id:1');

        $('#my_form').submit();
        //$("#my_form").trigger("submit");

    }
</script>
<h2>Index</h2>
<input type="button" name="action" value="Upload" onclick="redirect();"/>
<form id="my_form" name="my_form" action="/FileUpload/UploadFile" method="POST" enctype="multipart/form-data" >
    <div id="main">
        <input name="my_hidden" id="hfParam" type="hidden" />
        <input name="my_files" id="my_file" type="file" />
        <iframe id='my_iframe' name='my_iframe' src="">
        </iframe>
        <div id="someDiv"></div>
    </div>

</form>


[HttpPost]
        public ActionResult UploadFile()
        {
            ContentResult result = new ContentResult() { Content = "<p></p>", ContentType = "text/html"};
            HttpPostedFileBase postedFile = Request.Files[0];
            try
            {
                result.Content = "<p>" + postedFile.FileName + "</p>";

            }
            catch (System.Exception ex)
            {
                result.Content = ex.Message;
            }
            return result;
        }

From: http://kaushikghosh12.blogspot.com/2014/02/ajax-fileupload-on-all-browsers.html