19

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.

emersonthis
  • 30,934
  • 52
  • 191
  • 328
  • I can only remedy a guess as this should work fine (curse you, IE!). Hence why it's a comment: 1) http://mysite.dev/account-settings/?open=resume Can we change this to not be a query url? I've experience issues with query in the past with IE. Legacy JScript has query as a keyword that can modify the query string of a url without your knowing. Had me baffled for weeks. 2) Perhaps we can also try verifying the file is received on the server-side? You say there are no errors, but shouldn't there be? It could redirect back to this page for resubmission (and other fields pre-populated). – Graham Robertson Mar 26 '13 at 19:55
  • I'll test your idea bout the query url. As for verifying the file received on the server side... it definitely doesn't get saved there because the same page checks for its existence and it's definitely not getting there. Maybe you are suggesting something more complex, like whether the data actually gets sent? That's more interesting because on my form, that file upload is required. If a user on a real browser tries to skip it, the form submit will fail and the user sees a message. In IE9 literally nothing happens. The form submits "successfully" but there's no file uploaded/saved or error. – emersonthis Mar 27 '13 at 11:58
  • I've seen IE utterly fail to interact with the server when the form is as simple as

    upload

    Tag:
    local file to upload:
    – Mutant Bob Jun 13 '13 at 14:41
  • You might try simplifing your code, on both the client side and server side until you find the culprit (assuming there is one). I just did a test with your form on my server and was able to successfully upload a file in IE9. Here’s the code I used (PHP): https://gist.github.com/jimthoburn/5810636 And here’s the file I uploaded: http://img.wallpaperstock.net:81/windmills-wallpapers_22092_1600x1200.jpg – Jim Jun 19 '13 at 00:07

5 Answers5

2

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.

Tronathan
  • 5,654
  • 4
  • 19
  • 24
0

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?

Daniel Steiner
  • 510
  • 1
  • 9
  • 22
0

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" />
Onur Kucukkece
  • 1,608
  • 1
  • 18
  • 42
  • 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 Apr 02 '13 at 15:19
  • 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 and are being rendered totally different Maybe your problem is related to something like this. – Onur Kucukkece Apr 03 '13 at 10:11
0

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.

Community
  • 1
  • 1
Roy Tinker
  • 9,918
  • 4
  • 39
  • 53
  • 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. – emersonthis Apr 02 '13 at 18:28
  • 1
    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? – Roy Tinker Apr 02 '13 at 19:57
  • 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. – emersonthis Apr 02 '13 at 19:59
  • 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. – Roy Tinker Apr 02 '13 at 20:01
0

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.

Zenonline
  • 102
  • 8