multipart/form-data, multiple files upload with ajax

Question

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 :

  <form id="upload-attach-form" class="upload-form" name="upload-attach-form" enctype="multipart/form-data">
    <input type="hidden" name="identifier" ng-value="identifier" />
    <textarea name="text" class="input-xlarge" placeholder="input text..." style="height:6em;width:30em"></textarea>
    <input type="file" name="files" id="uploaded-files" multiple />
  </form>

  <button class="btn btn-success" ng-click="submitForm()">Send</button>

and the relevant js:

    $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");
        }
    });
}

What this leads to is an outbound request that looks like:

  Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryoIsRaBissNVsFEdr
  Content-Length: 44
  ...
  Request-Payload: ------WebKitFormBoundaryoIsRaBissNVsFEdr--
      <<nothing here>>
  Response-Headers: ...

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).

Answer 1

Try to replace:

var upload_data = new FormData($('#upload-attach-form'));

By this one:

var upload_data = new FormData($('#upload-attach-form')[0]);