Upload File and Send Data AngularJS + WebAPI

Question

I need to perform a file upload and send form data to WebApi Controller using AngularJS (also for IE8).

I have my form defined as

<form name="sendForm" ng-submit="submitForm()">
        <input type="text" name="fname" placeholder="First name" ng-model="form.firstname">
        <br>
        <input type="text" name="lname" placeholder="Last name" ng-model="form.lastname">
        <br>
        <input type="text" name="email" placeholder="Email" ng-model="form.email">
        <br>
        <input type="file" ng-model="form.file_idea" id="file_profile"><br />
        <br>
        <input type="submit" value="Submit">
    </form>

My Angular controller method is:

$scope.submitForm = function ()
{
    formData = $scope.form;

    var formObjectForWebApi =
        {
            Username: $scope.form.firstname,
            Lastname: $scope.form.lastname,
            Email: $scope.form.email,
        };

    $masterContext.SendForm(formObjectForWebApi).then(function (res)
    {
    });
}

My Master Context is defined as

var MasterContext = angular.module("MasterContext", []); MasterContext.service("MasterContextService", ["$resource",

function ($resource)
{
    var service = {};

    service.SendForm= function (form)
    {
        var webapiresource = $resource('/api/formcontroller/sendform');

        return webapiresource.save(form).$promise.
                then(function (res)
                {
                    return res;
                },
                function error(res)
                {
                    return res;
                });
    };

    return service;
}]);

My Web Api receive the data as

[Route("api/formcontroller/sendform")]
[HttpPost]
public IHttpActionResult SendForm(MyForm form)
{
   .
   .
   .
   .
   .

If i check the current request i am unable to find the file that the user wants to upload. How can i solve my situation?

Shaggy · Accepted Answer · 2016-03-10 20:21:54Z

0

Write below code to get the file in your method.

System.Web.HttpFileCollection httpRequest = System.Web.HttpContext.Current.Request.Files;
for (int i= 0; i <= httpRequest.Count - 1; i++) {
    System.Web.HttpPostedFile postedfile= httpRequest[i];<br/>
    if (postedfile.ContentLength > 0) {
        'logic'
    }
}

edited Mar 10, 2016 at 20:21

Shaggy

1,4741 gold badge23 silver badges34 bronze badges

answered Mar 10, 2016 at 19:25

Mukesh Rawat

315 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Upload File and Send Data AngularJS + WebAPI

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related