title: Upload file + Form Data + Spring MVC + JQuery
body: <p>I'll try to make this question as simple as I can. I want to upload a file <em>with</em> additional form data via an AJAX submission using JQuery (but also for it to be compatible with ie 7 or ie 8, and asynchronous too)</p>
  
  <p>Without the submit being an AJAX submission via JQuery, the process works fine. Namely I did the following:</p>
  
  <ol>
  <li>declared CommonsMultipartResolver</li>
  <li>In controller wrote this handler method</li>
  </ol>
  
  <p>@RequestMapping(value="/processfileupload", method = RequestMethod.POST)
          public @ResponseBody String handleFileUpload(UploadForm data, BindingResult result) throws Exception {</p>
  
  <pre><code>  ....
  </code></pre>
  
  <p>} </p>
  
  <p>Where UploadForm is a Spring MVC form object which I bound to the form. Also, I bound the formObject in Spring's form tag like so: enctype="multipart/form-data" .. etc..</p>
  
  <p>Like I said, works perfectly if it is NOT done via an Ajax call via JQuery. Once I tried to make it an Ajax call, the file is always null.</p>
  
  <p>Here is the Ajax call via JQuery</p>
  
  <p>function submitFileUploadViaAjax() {</p>
  
  <pre><code>   $.ajax({
  
          url: "processfileupload",
          data: $("#file_upload_form").serialize(),
          type: "POST", 
          processData: false,
          contentType: false,
  
          success: function(data) {
                  $(response).html(data);
          },
  
          error: function (xhr, ajaxOptions, thrownError) {
                  if (xhr.readyState == 0 || xhr.status == 0) {
                      // not really an error
                      return;
                  } else {
                      alert("XHR Status = "+xhr.status);
                      alert("Thrown Error = "+thrownError);
                      alert("AjaxOptions = "+ajaxOptions)
                  }
            }
  
      });
  </code></pre>
  
  <p>}</p>
  
  <p>I suspect the problem may be: data: $("#file_upload_form").serialize(),</p>
  
  <p>I have read some suggested solutions for those with similar problems to use a formData object but have read that this won't be compatible with IE 7 or IE 8, is this true? </p>
  
  <p>I head also read the JQuery file upload plug-in would work ( <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data" rel="nofollow">https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data</a>) but I'm not sure if I'd be able to wire this into spring with spring's great way of binding form data to a form object and then just injecting it into a controller. </p>
  
  <p>Does anyone have their thoughts on the best way to upload a file (relatively small) + have some form data, and be able to process this with a single endpoint in a spring mvc controller? And the solution so that it is compatible with most browsers, but especially will work with ie 7 or ie 8 (it's a requirement it work in those browsers.)</p>
  
  <p>Thanks a bunch!</p>
  
  <ul>
  <li>Rocco</li>
  </ul>