CODEWITHSUNDEEP
javascripttypescriptapiangular10
Ali.Rashidi
Ali.Rashidi

Reputation: 1462

Upload multiple files in angular 10 and .net core 5 using json object

I have an json object in a structure like this:

Class->Students this is a rough 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 very simple:

var classroom=new Classroom();
var student1=new Student();
student1.Name="Dexter";student1.Sex="male";student1.Age=28;
student1.Image='some file which is uploaded using input type=file'
classroom.push(student1);
var student2=new Student();
student2.Name="Alex";student2.Sex="male";student2.Age=20;
student2.Image='some file which is uploaded using input type=file'
classroom.push(student2);

I want to send this data to my api. if there was no image it was pretty simple but now if I use FormData to append every file to a FormData and send it to api, then at the api side I cant know what image belongs to whom?

if I append my image files to a FormData I will just have bunch of images at the backend but i wont be able to decide every picture belongs to whom?

and if i try to just send data as a body of post request like this

//service.ts
this.http.post(this.apiUrl+'/ControllerPath',classroom,{responseType:"json"});

I get an error like this:

System.NotSupportedException: The collection type 'Microsoft.AspNetCore.Http.IHeaderDictionary' on 'Microsoft.AspNetCore.Http.IFormFile.Headers' is not supported.

is there an easy to understand way to send multiple files to api but within a class or with a way to know each picture belongs to who (in my case)?

Upvotes: 0

Views: 199

Answers (1)

Ali Azami
Ali Azami

Reputation: 21

One way to answer the question is to encode image files into a string using base64 and then send that along with other data to the server-side.

you can get additional details here: How can I convert an image into Base64 string using JavaScript?

Upvotes: 1

Related Questions