title: How can I submit a form and upload a file using ajax to a spring controller?
body: <p>I have a form which contains four fields, the file, the name, the type (just a string) and the taskInstanceId.</p>
  
  <pre><code>&lt;form&gt;
     &lt;table id="documentDetailsTable"&gt;
         &lt;tr&gt;
             &lt;td&gt;Document Type: &lt;/td&gt;
             &lt;td&gt;&lt;select id="documentType" name="type"&gt; &lt;/select&gt;&lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr&gt;
             &lt;td&gt;
                Document Name:
             &lt;/td&gt;
             &lt;td&gt;
                &lt;input type="text" id="documentName" name="name"/&gt;
             &lt;/td&gt;
         &lt;/tr&gt;
         &lt;tr id="newFile"&gt;
             &lt;td&gt;
                Choose a file:
             &lt;/td&gt;
             &lt;td&gt;
                 &lt;input type="file" name="file" /&gt;
             &lt;/td&gt;
      &lt;/table&gt;
      &lt;input type="text" style="display: none;" name="taskInstanceId" id="taskInstanceId"&gt;
  
       &lt;input id="uploadButton" value="Upload" type="submit"/&gt;
       &lt;input class="closeButton" id="closeNew" value="Close" type="button"/&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>If I submit this form it will connect to my FileUploadController and the file will upload.</p>
  
  <pre><code>@RequestMapping(value = "/formTask.do", method = RequestMethod.POST)
  public ModelAndView handleFormTaskUpload(@RequestParam("name") String name,
          @RequestParam("type") String type,
          @RequestParam("file") MultipartFile file,
          @RequestParam("taskInstanceId") int taskInstanceId)...//rest of the code
  </code></pre>
  
  <p>Now I would like to submit this form using jquery/json instead so that I can return a string indicating a successful upload and then display a dialog on the page indicating this. (I don't want to return a new ModelAndView).</p>
  
  <p>So using the same html form I create a new Controller function...</p>
  
  <pre><code>@RequestMapping(value = "/formTask2.json", method = RequestMethod.POST)
  public String handleFormTaskUpload2(UploadTaskDocument myNewUpload)).../rest of the code
  </code></pre>
  
  <p>Now I would like to submit the form above using jQuery. My attempt is here.</p>
  
  <p>This function is called everytime the file is changed. </p>
  
  <pre><code>function prepareUpload(event)
  {
      files = event.target.files;
  }
  </code></pre>
  
  <p>And this one is called when the form is submitted.</p>
  
  <pre><code>function uploadFiles(event)
  {
  event.stopPropagation(); // Stop stuff happening
  event.preventDefault(); // Totally stop stuff happening
  
  var data;
  data = {
      documentName: $("#documentName").val(),
      documentType: $("#documentType").val(),
      taskInstanceId: selectedTaskInstanceId,
      uploadedfiles: files
  };
  var json = JSON.stringify(data);
  $.ajax({
      url: '/SafeSiteLive/formTask2.json',
      type: 'POST',
      data: json,
      cache: false,
      dataType: 'json',
      processData: false, // Don't process the files
      contentType: false, // Set content type to false as jQuery will tell the server its a query string request
      success: function (data, textStatus, jqXHR)
      {
          if (typeof data.error === 'undefined')
          {
              // Success so call function to process the form
              //submitForm(event, data);
          }
          else
          {
              // Handle errors here
              console.log('ERRORS: ' + data.error);
          }
      },
      error: function (jqXHR, textStatus, errorThrown)
      {
          // Handle errors here
          console.log('ERRORS: ' + textStatus);
          // STOP LOADING SPINNER
      }
  });
  }
  </code></pre>
  
  <p>The Json data looks like this before it's posted...</p>
  
  <p><img src="https://i.stack.imgur.com/oC1yc.png" alt="enter image description here"></p>
  
  <p>But once it reaches the server everything is null...</p>
  
  <p><img src="https://i.stack.imgur.com/gXO6W.png" alt="enter image description here"></p>