title: Post FormData file along with model data using angular js
body: <p>I am uploading image using input type file along with other user data. My model consists of the User class:</p>
  
  <pre><code>public class User
  {
      public int Id { get; set; }
      public string Name { get; set; }
      public int Rollno { get; set; }
      public byte[] ProfileImage { get; set; }
      public HttpPostedFile image { get; set; }
  }
  </code></pre>
  
  <p>and a posted method in asp.net mvc:</p>
  
  <pre><code>public ActionResult AddUser(User user)
  {
      var files = Request.Files;
      foreach (string fileName in Request.Files)
      {
          HttpPostedFileBase file = Request.Files[fileName];
          byte[] uploadFile = new byte[file.InputStream.Length];
  
      }
      return View();
  }
  </code></pre>
  
  <p>I have an input tag like this:</p>
  
  <pre><code>&lt;input id="imgInp" type="file" aria-label="Add photos to your post" class="upload" name="file" onchange="angular.element(this).scope().LoadFileData(this.files)" multiple="" accept="image/*"&gt;
  </code></pre>
  
  <p>and an angularJS controller like this:</p>
  
  <pre><code>angular.module('app', ['AngularDemo.BeerController']).
    controller('formController',['$scope','$http', function ($scope,$http) {
      alert('in controller');
      var formData = new FormData();
  
      $scope.LoadFileData = function (files) {
          for (var file in files) {
              formData.append("file", files[file]);
          }
      };
  
      $scope.submit = function () {
  
          alert('in submit');
          $http.post("/Home/AddUser", formData, {
              withCredentials: true,
              headers: { 'Content-Type': undefined },
              transformRequest: angular.identity
          }).success(function (response) {
  
          });
      }
  }]);
  </code></pre>
  
  <p>My image file is posting back in the <code>AddUser</code> method but how do I send the model data? I have added <code>ng-model="Name"</code> etc in the form. How do I send <code>$scope.Name</code> etc with that image data since my <code>$http.post</code> taking form data as passing data?</p>