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="john.henry@johnhenry.com" />

            <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.

Answer 1

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.

Answer 2

As Graham does, I think that this might more be a server issue - also I have never had issues with fileuploads in IE9 (or newer) - I guess you don't want to post the code of the PHP Script that handles the upload?

Answer 3

if any data is not being sent, You could check the post data by your hidden input on your server side script. For example if you're using php it would be something like

<? if($_POST['resume_form']=='resume_form'){
    //Do something
} ?>

Or you could also use meta compatible tags for IE to render the page like IE8

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Answer 4

I suggest setting the X-UA-Compatible meta tag value and seeing whether that makes any difference.

See this question for possible values: What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?

It may also be that the page is triggering a non-standards mode in IE9. I suggest opening the page in IE9, opening the developer tools, and seeing which browser/document modes are selected. That may give you a clue. Note that the "enctype" form attribute was not supported prior to IE8, so if the browser is using an older doc mode, that attribute is not being recognized.

Answer 5

OK I'd rather leave a comment not an answer but I don't have the points for that yet!

1. Are the users in quirks mode? Most IE users are unaware of the quirks mode and may have accidentally clicked it when trying to refresh the page (instead of pressing F5). If it is intermittent this could be the reason why.

2. following on from above.. On the server side how are you checking for empty fields? I'm more on the lines of JS here where you often look for "", null and undefined I'm just thinking that perhaps the quirks mode is sending some fuzzy data that your server side error checking is missing because you aren't looking for it and hence reports all is OK.