title: Angularjs : Post form data with an image to Web API backend
body: <p>I am trying to post a form data that includes an image from Angularjs client to a Web API backend, but gets an error:
  "Could not create an instance of type System.Web.HttpPostedFileBase. Type is an interface or abstract class and cannot be instantiated. Path 'ProfileImage', line 1, position 299."</p>
  
  <p>My angular code is </p>
  
  <pre><code>        $scope.RegisterUser = function () {
            $http({
                method: 'POST',
                url: 'http://localhost:2434/api/Account/BrandRegistration/',
                data: $scope.brandForm,
                file : $scope.brandForm.ProfileImage
            }).then(function successCallback(response) {
                // this callback will be called asynchronously
                // when the response is available
                console.log("libin");
            }, function errorCallback(response) {
                // called asynchronously if an error occurs
                // or server returns response with an error status.
            });
  </code></pre>
  
  <p>My web api method is </p>
  
  <pre><code>     public async Task&lt;IHttpActionResult&gt; PostBrandRegistration(BrandRegistration brandVM)
      {
          if (!ModelState.IsValid)
          {
              return BadRequest(ModelState);
          }
         var  roleManager = new RoleManager&lt;IdentityRole&gt;(new RoleStore&lt;IdentityRole&gt;(new ApplicationDbContext()));
          if (!roleManager.RoleExists("brand"))
          {
              var role = new Microsoft.AspNet.Identity.EntityFramework.IdentityRole();
              role.Name = "brand";
              roleManager.Create(role);
          }
          if (!roleManager.RoleExists("influencer"))
          {
              var role = new Microsoft.AspNet.Identity.EntityFramework.IdentityRole();
              role.Name = "influencer";
              roleManager.Create(role);
          }
          var user = new ApplicationUser()
          {
              UserName = brandVM.Email,
              Email = brandVM.Email
          };
          var fileName = "";
          var file = HttpContext.Current.Request.Files.Count &gt; 0 ?
         HttpContext.Current.Request.Files[0] : null;
          if (file != null &amp;&amp; file.ContentLength &gt; 0)
          {
               fileName = Path.GetFileName(file.FileName);
  
              var path = Path.Combine(
                  HttpContext.Current.Server.MapPath("~/App_Data/ProfileImage"),
                  fileName
              );
  
              file.SaveAs(path);
          }
          user.BrandUser = new BrandUser()
          {
              FullName = brandVM.FullName,
              ContentType = brandVM.ContentType,
              Description = brandVM.Description,
              URL = brandVM.URL,
              ContactPerson = brandVM.ContactPerson,
              Position = brandVM.Position,
              PhoneNumber = brandVM.PhoneNumber,
              ContactEmail = brandVM.Email,
              Address = brandVM.Address,
              MarketPlace = brandVM.MarketPlace,
              Campaigns = brandVM.Campaigns,
              InfluencerRating = brandVM.InfluencerRating,
              ProfileImage = fileName
          };
          user.BankDetail = new BankDetail()
          {
              AccountNumber = brandVM.AccountNumber,
              AccountName = brandVM.AccountNumber,
              IRD = brandVM.IRD,
              GST = brandVM.GST
          };
          IdentityResult result = await UserManager.CreateAsync(user, brandVM.Password);
          if (!result.Succeeded)
          {
              return GetErrorResult(result);
          }
          else
          {
              await this.UserManager.AddToRoleAsync(user.Id, "brand");
  
              return Ok();
          }
       }
  </code></pre>
  
  <p>And my View Model is</p>
  
  <pre><code>public class BrandRegistration
  {    
      public string Email { get; set; }
      public string Password { get; set; }
      public string PasswordConfirmation { get; set; }
  
      public string FullName { get; set; }
      public string ContentType { get; set; }
      public HttpPostedFileBase ProfileImage { get; set; }       
      public string Description { get; set; }
      public string URL { get; set; }
      public string ContactPerson { get; set; }
      public string Position { get; set; }
      public string Company { get; set; }
      public int PhoneNumber { get; set; }
      public string ContactEmail { get; set; }
      public string Address { get; set; }
      public string AccountNumber { get; set; }
      public string AccountName { get; set; }
      public string IRD { get; set; }
      public string GST { get; set; }
      public bool MarketPlace { get; set; }
      public bool Terms { get; set; }
      public double InfluencerRating { get; set; }
      public int Campaigns { get; set; }
  }
  </code></pre>
  
  <p>I really appreciate if someone can advice me of where i have gone wrong.</p>