Webforms Ajax File Upload Issue with IE7 and IE8

Question

The file upload fields in my webform work everywhere except IE7 and IE8. When I click the upload button I get a js alert that says the following

"An error has occurred while attempting to process /file/ajax/submitted/nameofmyuploadfield/form-reallylongrandomstring:"

I've tried several different versions of jQuery through the jQuery Update module but to no avail. I even tried the webform module right out of the box on a new drupal instance and got the same error. I'm having a hard time believing webform file uploads were never meant to work on IE7 and IE8 but that seems to be the reality of my situation. Please share some wisdom about overcoming this issue.

here is an example to the out-of-the-box webform file upload not working in IE7 and IE8 http://bonkmas.com/vids/node/4

Answer 1

I've managed to solve this weird issue, the root cause was relatively easy to find once you have the correct tools to debug. Which is an issue in IE7/8. My issue was related to Adaptive Image Styles, and it now works with that disabled.

The answer here: IE8 Debugging (stack overflow) helps equip us with a bit better debugging capability in IE8.

Set a watch on e, and check to see what the error throws to see if that gives any hints in where to look next.

Now the problem I specifically encountered comes from /misc/ajax.js so open up this file and make the following changes starting line 239:

//try {
    if (ajax.form) {
      // If setClick is set, we must set this to ensure that the button's
      // value is passed.
      if (ajax.setClick) {
        // Mark the clicked button. 'form.clk' is a special variable for
        // ajaxSubmit that tells the system which element got clicked to
        // trigger the submit. Without it there would be no 'op' or
        // equivalent.
        element.form.clk = element;
     // }

      ajax.form.ajaxSubmit(ajax.options);
    }
    else {
      ajax.beforeSerialize(ajax.element, ajax.options);
      $.ajax(ajax.options);
    }
  }
  //catch (e) {
    // Unset the ajax.ajaxing flag here because it won't be unset during
    // the complete response.

    ajax.ajaxing = false;

    alert("An error occurred while attempting to process " + ajax.options.url + ": " + e.message);
  //}

This removes the try/catch since they were obscuring where the error was coming from in the IE inspector. Now set breakpoints on each one of those variables and set a watch on ajax. Hit upload on your page and continue through the errors checking each variables, then as it hits an error the Console should take you to which ever file is throwing the error.

Hope this helps you.