I am attempting to post form data to the server. This form is in the backoffice in a custom section, on a custom dashboard. The form data contains a file to upload. I am not having any luck here. If someone can point me in the right direction, that would be great.

HTML:

<div ng-controller="SubscriptionsController">
    <form>
        <strong>Add New Item</strong>
        <table cellpadding="5">
            <tr>
                <td>Title:</td>
                <td><input type="text" name="txtNewSubTitle" ng-model="newSub.title" required no-dirty-check /></td>
            </tr>
            <tr>
                <td>Post Date:</td>
                <td><umb-date-time-picker ng-model="newSub.postDate" options='{dateFormat: "m-d-Y"}' id="txtNewSubPostDate"></umb-date-time-picker></td>
            </tr>
            <tr>
                <td>PDF:</td>
                <td><input type="file" id="fuNewSubFile" /></td>
            </tr>
            <tr>
                <td>Active:</td>
                <td><input type="checkbox" id="chkNewSubActive" ng-model="newSub.active" /></td>
            </tr>
            <tr>
                <td colspan="2"><input type="checkbox" id="chkNewSubSendNotifications" ng-model="newSub.notify" /> - Check this box to send notification to subscribers</td>
            </tr>
            <tr>
                <td align="right">
                    <input type="submit" ng-click="SaveSub()" value="Save" />
                </td>
            </tr>
        </table>
    </form>
</div>

controller:

    angular.module('umbraco').controller('SubscriptionsController', function ($scope, $http, SubscriptionsResource) {
        $scope.newSub = {};        

        $scope.SaveSub = function () {
            var fileInput = document.getElementById('fuNewSubFile');
            var file = fileInput.files[0];    
            $scope.newSub.file = file;
            var payload = new FormData();
            payload.append("newSub", $scope.newSub);

           SubscriptionsResource.SaveNewSub(payload).then(function (response) {
                alert("server says: " + response.data);
            });

        };

    }

Resource:

angular.module('umbraco.resources').factory('SubscriptionsResource',
    function ($q, $http) {        
        var saveNewSubResult = function (payload) {
            return $http({
                url: "backoffice/My/SubscriptionsApi/SaveSub/",
                method: 'POST',
                data: payload,
                headers: { 'Content-Type': undefined },
                transformRequest: angular.identity
            });
        }
        return {
            SaveNewSub: saveNewSubResult
        };
    }
); 

Server-side API controller:

using System;
using System.IO;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;
using Umbraco.Web.WebApi;
using Umbraco.Web.Editors;
using Umbraco.Core.Persistence;
using System.Web.Script.Serialization;
using Bridge.Models;
using System.Web.Mvc;
using Umbraco.Web.Mvc;

namespace My.Controllers
{    
    public class NewSubFormData
    {
        public string title { get; set; }
        public DateTime postDate { get; set; }
        public HttpPostedFileBase file { get; set; }
        public bool active { get; set; }
        public bool notify { get; set; }
    }

    [Umbraco.Web.Mvc.PluginController("My")]
    public class SubscriptionsAPIController : UmbracoAuthorizedApiController
    {      

        public string SaveSub(NewSubFormData newSub) 
        {                
            return "Success";    
        }

    }
}

When I click "submit", I get the following errors:

"The request entity's media type 'text/plain' is not supported for this resource."

No MediaTypeFormatter is available to read an object of type 'NewSubFormData' from content with media type 'text/plain'