Send an image to an api controller with angularjs

Question

I have this on my html page

<div class="form-group col-xs-7 col-lg-6">
    <label>Background image</label>
    <input type="file" name="background_image" id="background_image" ng-model="selectedLayout.background_image" class="form-control" />
    <button class="btn btn-primary" ng-click="save(selectedLayout)">Change background image</button>
</div>

This is what I have in controller

$scope.save = function (selectedLayout) {
    $http({
        method: 'POST',
        url: 'api/LayoutSettings/PostImage',
        data: selectedLayout.background_image,
        headers: {
            'Content-Type':'image/jpeg'
        }
    });
};

And this is my method in the api controller named LayoutSettings

public async Task<HttpResponseMessage> PostImage()
{
    if (!Request.Content.IsMimeMultipartContent())
    {
        throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
    }

    var root = HttpContext.Current.Server.MapPath("~/App_Data");
    var provider = new MultipartFormDataStreamProvider(root);

    try
    {
        await Request.Content.ReadAsMultipartAsync(provider);
        return Request.CreateResponse(HttpStatusCode.OK);
    }
    catch (Exception e)
    {
        return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
    }
}

I don't know why when i actual press the change background image I send an empty object. Someone have some idea how i can actual pass the image there? Thanks.

Answer 1

ng-model is not supported by input[file] type, there is a note in the Angular docs about it:

Note: Not every feature offered is available for all input types. Specifically, data binding and event handling via ng-model is unsupported for input[file].

Try this instead.