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

enter image description here

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.

similar kind of question : stackoverflow.com/questions/16976079/… — sunder
– sunder, Commented Jan 14, 2015 at 16:24
try changing the content type to multipart/form-data and also I don't see a comma after xhr and success definitions and the $.ajax({ --- }); is not closed properly — Arkantos
– Arkantos, Commented Jan 24, 2015 at 8:31

ACCurrent · Accepted Answer · 2015-02-06 08:30:01Z

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

How should I show upload progress in progess bar with iframe postback.

Vijay · Accepted Answer · 2015-01-19 17:48:47Z

0

Did you try passing Absolute URL for handlerUrl?

If your code is written in a standalone js file, absolute URL can help else if the code is written on html then passing the right relative URL will help.

answered Jan 19, 2015 at 17:48

Vijay

3,0231 gold badge17 silver badges24 bronze badges

Comments

Sonu · Accepted Answer · 2015-02-06 08:27:07Z

0

You can crate an iframe and then attach and post your images using this iframe. It will post your image simply but will look like you posted using ajax.

answered Feb 6, 2015 at 8:27

Sonu

4486 silver badges13 bronze badges

Comments

Theodor Solbjørg · Accepted Answer · 2015-02-06 12:51:37Z

We're using https://blueimp.github.io/jQuery-File-Upload/ works perfectly on IE, of course when you get to IE8-9 then you cant really have Drag 'n Drop fully or even partially supported, but its IE.

fileUpload.fileupload({
     autoUpload: false,
     dataType: 'json',
     url: url,
     uploadTemplateId: null,
     downloadTemplateId: null,
     filesContainer: $('.x-table-uploaded-files tbody'),
     uploadTemplate: function (o) {  ... a.s.o

best of all uploaders i've ever handled. (sorry for the incomplete source, work, cant share to much :/)

    [HttpPost]
    public JsonResult Upload(IEnumerable<HttpPostedFileBase> files, int CId)
    {
        UploadResult result = cf.Handle(files, CId);
        result.ErrorCount = result.files.Count;
        if (result.files.Count > 100)
        {
            result.files = new List<FileErrorResults>();
        }
        return Json(result, JsonRequestBehavior.AllowGet);
    }

That example is a auto upload drag and drop file parser that spits back results realtime after analysis and gives errors of files, while the user is dragging the rest of his files. Supports IE10 and above, of course with IE8-9 you have to click and select files instead of drag and drop, but i guess that is punishment enough that they are using IE.

However i did try to google for a solution for ya, it seems that there were a lot of bugs in the IE teams list for upload pending issues, that files in many scenarios just get stuck. Its a dangerous platform.

Collectives™ on Stack Overflow

IE jquery async file upload request pending

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related