Angular-file-upload not posting image to C# MVC Controller

Question

I am applying angular-file-uploader.js in my ASP.NET MVC application. I want to upload an image in a folder on a server. The problem happens on receiving the image on my ProductTemplate controller( image is always null ):

public ActionResult FileUpload(HttpPostedFileBase image)
{
    ...
}

My angular controller:

MyApp.controller("MyController", ['$scope', '$upload',
function ($scope, $upload) {

    $scope.imageFile = {};

    $scope.saveImage = function(images) {
        var image = images[0];
        image.upload = $upload.http({
            url: '/ProductTemplate/FileUpload',
            method: 'POST',
            headers: {
                'Content-Type': image.type
            },
            data: image
        });

        image.upload.then(function(response) {
            ...some code...
        }, function() {
            ...some code...
        });
    };
}

Html page:

<form>
    <input type="file" accept="image/*" ng-file-select="" ng-model="imageFile" name="imageFile">
    <button class="btn btn-default" ng-click="saveImage(imageFile)">Change image</button>
</form>

How to achieve getting the right image on the back end controller?

Answer 1

I came across this while searching for a solution to the same problem, so I am answering even though the original question is kind of old:

What I did was to ignore the automatic binding and just check Request.Files:

foreach (string file in Request.Files) {
    var fileContent = Request.Files[file];
    if (fileContent != null && fileContent.ContentLength > 0) 
        ...