title: How to set a boundary on a multipart/form-data request while using jquery ajax FormData() with multiple files
body: <p>I have an HTML form that needs to upload 3 parts to an existing REST API in a single request.  I can't seem to find documentation on how to set a boundary on a FormData submission.</p>
  
  <p>I've attempted to follow the examples given here:
  <a href="https://stackoverflow.com/questions/6974684/how-to-send-formdata-objects-with-ajax-requests-in-jquery">How to send FormData objects with Ajax-requests in jQuery?</a></p>
  
  <p>However when I submit the data it gets rejected with the following stacktrace:</p>
  
  <pre><code>Caused by: org.apache.commons.fileupload.FileUploadException: the request was rejected because no multipart boundary was found.
  </code></pre>
  
  <p>How can I set a boundary?</p>
  
  <p>Here is the HTML/Javascript:</p>
  
  <pre><code>   &lt;script type="text/javascript"&gt;
      function handleSubmit() {
  
  
          var jsonString = "{" +
                  "\"userId\":\"" + document.formSubmit.userId.value + "\"" +
                  ",\"locale\":\"" + document.formSubmit.locale.value + "\"" +
                  "}";
  
          var data = new FormData();
          data.append('Json',jsonString);
          data.append('frontImage', document.formSubmit.frontImage.files[0]);
          data.append('backImage', document.formSubmit.backImage.files[0]);
  
          document.getElementById("sent").innerHTML = jsonString;
          document.getElementById("results").innerHTML = "";
          $.ajax({
                     url:getFileSubmitUrl(),
                     data:data,
                     cache: false,
                     processData: false,
                     contentType: 'multipart/form-data',
                     type:'POST',
                     success:function (data, status, req) {
                         handleResults(req);
                     },
                     error:function (req, status, error) {
                         handleResults(req);
                     }
                 });
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the Form:</p>
  
  <pre><code>&lt;form name="formSubmit" action="#"&gt;
      userId: &lt;input id="userId" name="userId" value=""/&gt;&lt;br/&gt;
      locale: &lt;input name="locale" value="en_US"/&gt;&lt;br/&gt;
      front Image: &lt;input type="file" name="frontImage"/&gt;&lt;br/&gt;
      back Image: &lt;input type="file" name="backImage"/&gt;&lt;br/&gt;
      &lt;input type="button" onclick="handleSubmit();" value="Submit"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Thanks in advance for any help!</p>