Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

151
Views
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)?

7 months ago · Juan Pablo Isaza
1 answers
Answer question

0

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?

7 months ago · Juan Pablo Isaza Report
Answer question
Find remote jobs