ASP.Net Web Api & Angularjs: Multiple Files Upload

Question

I cannot pass the uploaded files into the controller.

this is my controller:

[System.Web.Http.HttpPost]
[System.Web.Http.Authorize(Roles = "Admin")]
public string UploadFile()
{
    var file = HttpContext.Current.Request.Files.Count > 0 ? HttpContext.Current.Request.Files[0] : null;

    if (file != null && file.ContentLength > 0)
    {
        var fileName = Path.GetFileName(file.FileName);

        var path = Path.Combine(
            HttpContext.Current.Server.MapPath("~/uploads"),
            fileName
        );

        file.SaveAs(path);
    }

    return Helpers.JsonHelper.Stringify(new { success = true });
}

This is the Angularjs:

var uploadFileToUrl = function (file, uploadUrl, progressCB) {

    var token = $('input[name="__RequestVerificationToken"]').val();

    var form = new FormData();
    $(file).each(function (i, el) {
        form.append('file', el, el.name);
    })

    $http.post(uploadUrl, form, {
        headers: { "Authorization": "Basic " + token, "Content-Type": 'multipart/form-data' },
        uploadEventHandlers: {
            progress: progressCB
        }
    });
}

Before uploadFileToUrl is called, the files are set with setViewValue() to display the images before uploading (preview).

So somewhere in the directive there is:

app.directive("selectNgFiles", function () {
    return {
        require: "ngModel",
        link: function postLink(scope, elem, attrs, ngModel) {
            elem.on("change", function (e) {
                var files = elem[0].files;
                ngModel.$setViewValue(files);
            })
        }
    }
});

But I suppose this will not cause the problem right?

The problem is that HttpContext.Current.Request.Files is always empty, even thought I have set it in the formData. Why does it always empty?

---

NOTE

Please see that attached debug images from Chrome.