HttpPostedFileBase via Angular to Web Api always null

I'm trying to upload large files for Azure which I can do via jQuery and standard MVC controller.

However I want to upload via AngularJS to a Web Api to perform the upload. I've the Angular form as...

<div class="jumbotron" ng-app="myAppModule">
    <div ng-controller="myAppController">
            <span>Choose Video</span>
            <input type="file" id="file" name="file" class="upload" />
            <input type="submit" ng-click="save()" value="Upload" />
    </div>
</div>

The controller.js is...

app.controller('myAppController', function ($scope, myAppService) {
$scope.save = function () {
var f = document.getElementById('file').files[0];

    var FileUpload = {
        FileName: "Filename Temp",
        Description: "Description Temp",
        File: f
    };

        var promisePost = myAppService.post(UploadFile);
        promisePost.then(function (pl) {
        // do something..
        }, function (err) {
            console.log("Err" + err);
        });
    };
});

The service.js is...

app.service('myAppService', function ($http) {
this.post = function (UploadFile) {
      var request = $http({
        method: "post",
        url: "/api/uploadapi",
        data: UploadFile
    });
    return request;
    }
});

My model is...

public class UploadFile
{
    public string FileName { get; set; }
    public string Description { get; set; }
    public HttpPostedFile File { get; set; }
}

And for testing only my Web Api "post" is...

public void Post(UploadFile thePostedFile)
{
    //do something...
}

Stepping through I can see the filename, description and file itself via console.log right through to the service.js file. The api gets called and I can see filename and description in the UploadModel model, but the HttpPostedFileBase file is always null.

I find this AngularJS method quite clean and compact but I'm stuck on how to get HttpPostedFileBase populated.

Can anyone advise please if/where I'm going wrong?

Thanks.