0

I'm trying to upload an image along with other types of data using web api, angular JS . My POST employee API controller action is :

[ResponseType(typeof(Employee))]
public async Task<IHttpActionResult> PostEmployee(Employee employee)
{
    byte[] data = new byte[employee.Image.ContentLength];
    employee.Image.InputStream.Read(data, 0, employee.Image.ContentLength);
    employee.Picture = data;
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }

    db.Employees.Add(employee);
    await db.SaveChangesAsync();

    return CreatedAtRoute("DefaultApi", new { id = employee.ID }, employee);
}

The Service JavaScript is:

app.service('Service', function ($http) {
    this.getEmployees = function () {
        return $http.ger("/api/EmployeeApi");
    }

    this.post = function (Employee) {
        var request = $http({
            method: "post",
            url: "/api/EmployeeApi/PostEmployee",
            data: Employee,
            headers: {
                'Content-Type' : 'application/json'
            }
        });
        return request;
    };
});

The "AddEmployee " Controller which I'm using for posting employee to the server is 

app.controller('AddEmployee', function ($scope, Service) {
    $scope.ID = 1;
    $scope.save = function () {
        var Employee = {
            ID: $scope.ID,
            Name: $scope.Name,
            Experience: $scope.Experience,
            EmployerName: $scope.EmployerName,
            Image:$scope.Image
        };
        var Post = Service.post(Employee);
        Post.then(function (pl) {
            alert("Student Saved Successfully.");
        },
        function (errorPl) {
            $scope.error = 'failure loading Student', errorPl;
        });
    };
});

The "Image" attribute Is not being posted to the server . rather it's throwing null. Probably problem with binding . I'm not sure why the image attribute is not being bind to the model while other attributes can.

ManoDestra
  • 5,756
  • 6
  • 22
  • 48
sujay kodamala
  • 317
  • 3
  • 16
  • 1
    Possible duplicate of [What is a NullReferenceException, and how do I fix it?](http://stackoverflow.com/questions/4660142/what-is-a-nullreferenceexception-and-how-do-i-fix-it) – CodeCaster May 31 '16 at 15:46
  • Can you debug you .NET code? I guess that your Employee is not binded correctly. Try to add [FromBody] attribute. And it's also better to check ModelState.IsValid at the beginning – Roman Koliada May 31 '16 at 15:53
  • If you are trying to send a raw byte array inside your `Employee` object, than that's your problem. But before continue you **must** debug the `NullReferenceException`. – Federico Dipuma May 31 '16 at 16:11
  • @CodeCaster , this is not a duplicate of the question you referred. The image is not being posted to the server and it's throwing null . – sujay kodamala May 31 '16 at 16:30
  • @RomanKoliada , I tried debugging. The "image" is throwing null. that's the reason why I'm having error . – sujay kodamala May 31 '16 at 16:33
  • @sujaykodamala then that is your question. Your question should be "why is `Image` in my model null"? and explain what you are doing that leads you to believe it shouldn't be null. – vcsjones May 31 '16 at 16:35
  • @FedericoDipuma I'm not sending raw bytes. I'm trying to convert the image to bits on the server side and trying to save it – sujay kodamala May 31 '16 at 16:47
  • Add relevant code (both client-side and server-side) for the `Employee` object. Again, it seems to me that you are trying to send/receive a blob (raw bytes) as a property of your object that will be converted to JSON. This will not work. – Federico Dipuma May 31 '16 at 16:53
  • @FedericoDipuma , thank you for your response. I have added relevant code – sujay kodamala May 31 '16 at 17:45
  • Perhaps rename your `$scope.Image` in the client to something more meaningful than merely Image to avoid conflict with reserved words. Also, output the contents of Employee to the console in your save() function to ensure that you're getting the data of the image in that posted variable. – ManoDestra May 31 '16 at 17:54
  • I tried doing what you said. Still it's not working..I guess it's one of the limitations of AngularJS not to post the files automatically . Thanks for your suggestion @ManoDestra – sujay kodamala May 31 '16 at 18:13

1 Answers1

1

I would assume that you are using an input with a type of file in your html to get the file name. Angular does not handle the binding for these automatically, so even though the file you selected shows up in the browser, it doesn't update the model. There are a number of directives available to work around this shortcoming.

This answer covers it pretty thoroughly. ng-model for <input type="file"/>

Community
  • 1
  • 1
Mike Feltman
  • 5,041
  • 1
  • 14
  • 34