Angularjs : Post form data with an image to Web API backend

Question

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."

My angular code is

        $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.
          });

My web api method is

     public async Task<IHttpActionResult> PostBrandRegistration(BrandRegistration brandVM)
    {
        if (!ModelState.IsValid)
        {
            return BadRequest(ModelState);
        }
       var  roleManager = new RoleManager<IdentityRole>(new RoleStore<IdentityRole>(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 > 0 ?
       HttpContext.Current.Request.Files[0] : null;
        if (file != null && file.ContentLength > 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();
        }
     }

And my View Model is

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; }
}

I really appreciate if someone can advice me of where i have gone wrong.

Answer 1

I'm not familiar with .NET, but you definitely should use form data on the client side.

var fd = new FormData();
            fd.append('file', $scope.brandForm.ProfileImage);
            fd.append('data', $scope.brandForm)
$http({
              method: 'POST',
              url: 'http://localhost:2434/api/Account/BrandRegistration/',
              data: fd
              transformRequest: angular.identity,
              headers: {'Content-Type': undefined}
          })