I am facing an issue trying to store image details in the database through Angular and ASP.NET Core. I am unable to retrieve the image data sent from Angular in the controller. Although I am able to obtain the image information using the [FromForm] attribute in the controller parameter, my goal is to have it stored inside the model itself. Any insights would be appreciated.
Here 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);
}