title: Spring Boot and jQuery file upload : Unsupported media type
body: <p>I am trying to upload a csv file with spring boot 1.2.0 REST controller and jQuery ajax. When I send the post request, I keep getting 415:Unsupported Media type error. Here is my form:</p>
  
  <pre><code>&lt;form id="upload_form"&gt;
      &lt;div id="message"&gt;        
  
      &lt;/div&gt;
  
      &lt;br/&gt;
      &lt;div class="row" id="upload-file-div" style="display: none"&gt;
          &lt;div class='col-sm-3'&gt;
              &lt;label&gt;Select File&lt;/label&gt;
              &lt;input type="file" name="file"&gt;
          &lt;/div&gt;
  
           &lt;div class='col-sm-3'&gt;
               &lt;input type="button" id="file-upload" class="btn btn-primary" value="Upload" onclick="uploadFile()"/&gt;           
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is my method to upload file:</p>
  
  <pre><code>function uploadFile(){
      var response = api.uploadCSV($("#upload_form"));
      if(response.status === 'OK'){
          $("#message").css('color', 'green');
      }else{
          $("#message").css('color', 'red');
      }
      $("#message").html(response.message);
  }
  </code></pre>
  
  <p>Here is the actual jQuery POST:</p>
  
  <pre><code>upload: function (url, form, ignoreSuccess) {
      var response = null;
      if (!this.validate(form)) {
          var array = form.serializeArray();
          alert(array);
          var formData = new FormData(form);
          console.warn(formData);
          $.ajax({
              type: "POST",
              url: API_PROXY + url,
              data: formData,
              cache: false,
              contentType: false,
              processData: false,
              async: false,
              beforeSend: function (request) {
                  if (api.getSession() !== null) {
                      request.setRequestHeader("Authorization", "Bearer " + api.getSession().bearer);
                  }
              },
              success: function () {}
  
          }).done(function (msg) {
              response = msg;
          });
  
      }
      return response;
  }
  </code></pre>
  
  <p>Following is my controller:</p>
  
  <pre><code>@RequestMapping(consumes = "multipart/form-data", method = RequestMethod.POST, 
          value = "/upload/twitter", produces = MediaType.APPLICATION_JSON_VALUE)
  public Response&lt;String&gt; uploadCsv(CsvUploadModel form) {
  </code></pre>
  
  <p>//Code</p>
  
  <p>}</p>
  
  <p>I have both MultipartConfigElement and MultipartResolver annotated in my spring boot class. I am using spring boot 1.2.0. When I send the post request with PostMan (chrome extension), it works as expected. However, when I try the above jquery code, it keeps throwing unsupported media type error.</p>
  
  <p>Following things I have tried:</p>
  
  <ul>
  <li>Playing around content-type header, finally I have set the contentType to false.</li>
  <li>Using form.serializeArray(), iterating over it and appending individual elements into formData.</li>
  <li>Sending the form object instead of form data.</li>
  </ul>
  
  <p>Can anyone please help me with this? Thanks in advance.</p>