title: multipart/form-data, multiple files upload with ajax
body: <p>Trying to create a multiple files + text block upload. Using RoR, AngularJS, you'll see some Bootstrap stuff too. Been searching SO and Google for about an hour, though admittedly it's just running in circles and I feel there should be a simple error. Here's the erb :</p>
  
  <pre><code>  &lt;form id="upload-attach-form" class="upload-form" name="upload-attach-form" enctype="multipart/form-data"&gt;
      &lt;input type="hidden" name="identifier" ng-value="identifier" /&gt;
      &lt;textarea name="text" class="input-xlarge" placeholder="input text..." style="height:6em;width:30em"&gt;&lt;/textarea&gt;
      &lt;input type="file" name="files" id="uploaded-files" multiple /&gt;
    &lt;/form&gt;
  
    &lt;button class="btn btn-success" ng-click="submitForm()"&gt;Send&lt;/button&gt;
  </code></pre>
  
  <p>and the relevant js:</p>
  
  <pre><code>    $scope.submitForm = function(){
      var upload_data = new FormData($('#upload-attach-form'));
      $.ajax({
          type: "POST",
          url: "/upload_attachment",
          data: upload_data,
          contentType: false,
          processData: false,
          success: function(){
              $("#attachment-ctrl").modal('hide'); //hide popup
          },
          error: function(){
              alert("failure");
          }
      });
  }
  </code></pre>
  
  <p>What this leads to is an outbound request that looks like:</p>
  
  <pre><code>  Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryoIsRaBissNVsFEdr
    Content-Length: 44
    ...
    Request-Payload: ------WebKitFormBoundaryoIsRaBissNVsFEdr--
        &lt;&lt;nothing here&gt;&gt;
    Response-Headers: ...
  </code></pre>
  
  <p>Which implies there's nothing in my form. Not sure where to start, been randomly replacing things here and there (kinda sick so probably not thinking straight). </p>