Why does my form not upload files in Internet Explorer 9?

Question

Welcome to episode 32,342,343 of "Why does Internet Explorer Suck So Much?"...

I've seen lots of reports that IE9 does a crappy job uploading files. Apparently it has lots of caveats about when it will or won't work (If someone has a definitive list I'd love to see it). However, most of the problems/solutions I see have found are related to javascript, usually the jQuery form plugin or something similar.

My form is not submitted via AJAX and the the file input field is not hidden or obscured with css. Yet, I get several support tickets per day from users on IE9 trying to submit the form and "nothing happens" (=the form submits. No errors, but the file is not uploaded.) I haven't gotten a single complaint with a different browser, and IE8 even seems to work (as well as it ever does).

Here's the top of my form. Am I missing something?

<form action="http://mysite.dev/account-settings/?open=resume" method="post" class="wpjb-form" enctype="multipart/form-data">    

        <input type="hidden" name="resume_form" value="resume_form" />
        <fieldset class="wpjb-fieldset-default">

            <input id="firstname" name="firstname" type="hidden" class="regular-text " value="John" />
            <input id="lastname" name="lastname" type="hidden" class="regular-text " value="Henry" />
            <input id="email" name="email" type="hidden" class="regular-text " value="[email protected]" />

            <div class="wpjb-element-input-checkbox wpjb-element-name-is_active">
                <label class="wpjb-label">Show resume? </label>
                <div class="wpjb-field">
                    <label for="is_active_1"><input type="checkbox" class="" name="is_active" id="is_active_1" value="1" checked="checked" /> Yes <small style="display:inline;">(Uncheck to hide your resume)</small></label>

                </div>
            </div>
            <div class="wpjb-element-input-select-one wpjb-element-name-file">
                            <label class="wpjb-label">Upload a <i>new</i> resume file</label>
                <div class="wpjb-field">
                    <input style="line-height:1em;" id="file" name="file" type="file" class="regular-text " />
                    <small class="wpjb-hint">Accepted file types: doc, docx, odf, pdf, rtf</small>
                </div>
            </div>
        </fieldset>
        ...

It goes on like this with a couple more <fieldset>s then ends like this:

    ....
    <p class="submit">
        <input type="submit" name="Submit" id="wpjb_submit" value="Save Changes" />
    </p>
</form>

Update I'm happy for everyone who has never experienced this problem but it's not just me: http://answers.microsoft.com/en-us/ie/forum/ie9-windows_vista/cannot-upload-files-using-internet-explorer-9/5724d921-ae71-e011-8dfc-68b599b31bf5

Update2 I'm seeing a lot of suggestions to add a meta tag to force the user agent to IE8... <meta http-equiv="X-UA-Compatible" content="IE=8" /> I don't want to do this because although I do support IE8, many of the elements on my site render differently in IE8 vs. IE9. This would create a rather sloppy user experience as any IE users would experience I temporary "time warp" back to IE8 on that specific page.

Solution

I was able to fix this nightmare of a problem by wrapping a jQuery form submit in a setTimeout:

$('#complete_profile input[type="submit"]').click(function(){
  setTimeout(function() {
    $('#complete_profile form').submit();
  }, 0);
});

This may cause duplicate submission when the form DOES submit, however, so be careful.

Comments

[emersonthis]

I know the form handles the submissions correctly because hundreds of users every day use it without any issues. The only problem comes infrequently from IE users.

[emersonthis]

See my comment to Onur above.

[emersonthis]

I don't want to do this because although I do support IE8, many of the elements on my site render differently in IE8 vs. IE9. This would create a rather sloppy user experience as any IE9 users would experience I temporary "time warp" back to IE8 on that specific page.

[Roy Tinker]

I'm not necessarily suggesting using that tag in production. What I mean is, trying different values while debugging may help you narrow down the source of the problem. The error may be intermittent, but there may be a larger problem you can look for -- wrong doc mode, wrong browser mode, etc... You are able to open the site in IE9, correct?

[emersonthis]

I am able to test in IE9 but the problem doesn't happen reliably, so it's hard to learn anything definitive from testing locally that way. I've been able to reproduce it once or twice in the past but not at all recently.

[Roy Tinker]

I understand that the problem is intermittent. What I'm suggesting is looking for other warning signs, like a wrong doc/browser mode. When something works in IE8 but not IE9, the root cause (in my experience) is usually a doc/browser mode problem, incorrect browser sniffing, or a deprecated/changed API being used in JavaScript. I suspect your problem is in the first category.

[Onur Kucukkece]

I had the same issue several times on our admin login pages and I've solved it with ie compatible meta tags. But I know in different versions of IE <button type="submit" value="Send"></button> and <button type="submit">Send</button> are being rendered totally different Maybe your problem is related to something like this.