jQuery file upload stuck in pending state with IE10, zero byte file

Question

I'm using this jQuery plug-in and seeing the same results on my website as I can reproduce on this demo:

http://blueimp.github.io/jQuery-File-Upload/

Even though the demo says "Upload server currently unavailable" you can still recreate the issue by going to the demo and trying to upload a zero byte file (must have a JPG, GIF or PNG extension since that is all they allow).

In FireFox and Chrome you will see it attempts to POST the zero byte file. In IE10, if you view the network tab in the developer tools, you will see an XMLHTTPRequest object stuck in "pending" state. If you upload a file of non-zero size in IE10, you will also see it POST the data.

I searched and found only a couple other people complaining about issues with zero byte files in IE10. They are not using the same jQuery plug-in as me, so I think it is a general IE10 issue. Also, the only answer I have found so far is to not allow users to upload zero byte files. I would like to support zero byte files if possible, they have some usage in my application and I use them myself from time to time, so who am I to call my users crazy for wanting this feature.

What are my options?

Answer 1

I had a client that ran into this problem too. I'm not exactly sure what caused it, but I'll add some more information to the mix.

The problem disappeared when using an InPrivate window. I then tried clearing cache, clearing cookies, and disabling all add-ons. That did not solve the problem.

Next I did an IE reset from View | Internet Options | Advanced Tab | Reset Internet Explorer Settings. I had the user preserve their settings like cookies and bookmarks. After a reboot, the problem went away. So I am guessing that an IE setting may be responsible for this.

If someone else runs into this, it would be useful if you could run a couple test scenarios and leave a comment. Maybe we can narrow down the exact cause and fix.

1. Test adding your domain to the list of 'trusted' sites on the Security tab and see if that makes a difference.
2. Test the "Reset Advanced Settings" button reached from the same location discussed in my earlier paragraph.

Answer 2

Still hoping for a better solution, but lacking that, this will be my answer:

$(elem).fileupload({
    add: function(e, data) {
        var file = data.files[0];
        if (file.size == 0 && ie >= 10) {
            ajaxPostFileNameOnly(file.name);
        }
        else {
            data.submit();
        }
    }
});

ie is a global variable in my app, set to the IE version, or 0 if not IE. I know feature detection is usually better, but in this case not sure how to detect this weird issue and because some browsers always report zero as the file size (Safari I think), I also can't just always trust that.

The ajaxPostFileNameOnly would be a function that just makes a simple AJAX request to send only the file name, instead of doing the normal file upload that the library does.

EDIT: I ended up just doing this for now, which makes IE10 work like prior versions of IE for this file upload library and just use an iFrame for the transport.

$(elem).fileupload({
    forceIframeTransport: !!ie
});

and some code to detect IE versions I put together from a couple different SO answers (warning, will not detect IE11+, will report those as IE10 most likely):

var ie = (function() {

var undef,
    v = 3,
    div = document.createElement('div'),
    all = div.getElementsByTagName('i');

while (
    div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
    all[0]
);

/*@cc_on
if (/^10/.test(@_jscript_version)) {
    v = 10;
}
@*/

return v > 4 ? v : undef;

} ());