I have a JSON object structured like this:
Class->Students this is a basic representation of my TypeScript class
export class Classroom
{
Id:number;
Name:string;
Students:Student[]=[];
}
export class Student
{
Name:string;
Age:number;
Sex:string;
Image:File;
}
my data is quite straightforward:
var classroom=new Classroom();
var student1=new Student();
student1.Name="Dexter";student1.Sex="male";student1.Age=28;
student1.Image='some file uploaded via input type=file'
classroom.push(student1);
var student2=new Student();
student2.Name="Alex";student2.Sex="male";student2.Age=20;
student2.Image='some file uploaded via input type=file'
classroom.push(student2);
I need to send this data to my API. However, handling image files complicates things. If I use FormData to append each file and send it to the API, how can I ensure each image is linked to the correct student?
If I just append the image files to FormData, I'll have a bunch of images on the backend without a clear way to match them to students.
And if I try to send the data as the body of a POST request like this
//service.ts
this.http.post(this.apiUrl+'/ControllerPath',classroom,{responseType:"json"});
I encounter an error:
System.NotSupportedException: The collection type 'Microsoft.AspNetCore.Http.IHeaderDictionary' on 'Microsoft.AspNetCore.Http.IFormFile.Headers' is not supported.
Is there a straightforward way to send multiple files to the API while maintaining the association with each student's image?