Unable to get Image details in the controller of Asp.net core

Issue

I want to store image details in the database but I am unable to get the image data in the controller which is sent from angular I'm able to get the image information using the [FromForm] attribute in the controller parameter. But I want it inside the model. Thanks in Advance.

This is the Model in Asp.net core

public class FileModel
{
    public FileModel()
    {
        SpouseDetails = new SpouseDetailsData();
        ChildrensDetails = new List<ChildrensDetailsDataModel>();
    }
    public IFormFile? Photo { get; set; }
    //public byte[]? PhotoData { get; set; }
    public int UserDetailId { get; set; }
    public List<ChildrensDetailsDataModel>? ChildrensDetails { get; set; }
    public SpouseDetailsData SpouseDetails { get; set; }
    public class ChildrensDetailsDataModel
    {
        public string ChildCountry { get; set; } = null!;
        public string ChildCity { get; set; } = null!;
        public string ChildState { get; set; } = null!;
        public string ChildPhoneNumber { get; set; } = null!;
        public DateTime ChildDOB { get; set; }
        public string ChildLastName { get; set; }
        public string ChildEmailAddress { get; set; } = null!;
        public string ChildFirstName { get; set; } = null!;
    }
    public class SpouseDetailsData
    {
        public string SpouseEmail { get; set; } = null!;
        public string? SpouseCity { get; set; }
        public string? SpouseState { get; set; }
        public string? SpouseCountry { get; set; }
        public string SpouseHometown { get; set; } = null!;
        public string SpouseFirstName { get; set; } = null!;
        public string SpouseLastName { get; set; } = null!;
        public DateTime SpouseDob { get; set; }
    }
}

This is the Angular code

   composeModel(): void {
    this.updateUserModel.firstName = this.profileForm.value.firstName;
    this.updateUserModel.lastName = this.profileForm.value.lastName;
    this.updateUserModel.socialMedia = this.profileForm.value.firstName;
    this.updateUserModel.state = this.profileForm.value.state;
    this.updateUserModel.dob = this.profileForm.value.DOB;
    this.updateUserModel.city = this.profileForm.value.city;
    //Spouse Details
    this.updateUserModel.spouseDetails = this.spouseDetails;
    this.updateUserModel.photoData=this.selectedFile;
    this.updateUserModel.childrensDetails =  this.profileForm.value.childrensDetails;
  }

Angular Model

    export class UserDetailModel {
    childrensDetails: ChildrensDetailsModel[]=[];
    spouseDetails!: SpouseDetails
    id:string="";
    photoData!:File;
    photo!:FormData
}

This is the Controller

 [HttpPost]
    [Route("UpdateUser")]
    public async Task<JsonResult> UpdateUser([FromBody] FileModel userDetailModel)
    {
        var userslist = await _userBusiness.UpdateUser(userDetailModel);
        return new JsonResult(new { userslist });
    }

Service file in angular

  updateUser(userDetailModel:any):Observable<any> {
    return this.http.post<any>(`${UserProfileURLConstants.USER_PROFILE}`,userDetailModel);
}

Solution

To post file with other additional data from angular frontend to API backend, as you mentioned, we can create and populate data with FormData, and make backend action method get values from posted form fields by specifying [FromForm] attribute.

const formData = new FormData();
formData.append('Photo', selectedFile);
formData.append('SpouseDetails.SpouseEmail', 'test@example.com');
formData.append('SpouseDetails.SpouseCity', 'blabla..');
// console.log(formData);
this.http
  .post<any>('{url_here}', formData)
  .subscribe((data) => {
    //...

Besides, if you'd like to post photo file(s) with data in request body, you can try to use FileReader.readAsDataURL() to get base64-encoded string, then you can convert it into a byte array in action method on backend.

Answered By - Fei Han