Upload file with parameters Angular 10 to .Net Core Web API using FormData

Question

I am looking for a way to attach parameters form along with a file using FormData.

so I have a file input and a form with many parameters.

this is how I send my file:

 let formData=new FormData();
 formData.append("file",<File>this.file);

this is my form:

 this.fileForm = this.fb.group({
  headline: [],
  fileType: [],
  fileCategory: [],
  fileEssence: []
});

I tried to add the form value like this:

 formData.append("params",this.fileForm.value);

but I can't find it in the c# code:

var form= Request.Form;

only brings the file object.

Is there another way to do this?

update:

this is my upload function in angular:

  save(){
   let formData=new FormData();
   formData.append("file",<File>this.file);
   formData.append("parameters",this.fileForm.value);
   this.fileService.uploadFile(formData).subscribe((res)=>{
  console.log(res);
})

}

file service:

 uploadFile(fileUpload: any): Observable<any> {
    return this.http.post(ApiConsts.uploadFile, fileUpload).pipe(
        map((res: any) => res))
}

C# function:

   public IActionResult UploadFile([FromForm] FileUploadDTO parameters, [FromForm] IFormFile file)
    {
    }

FileUploadDTO class:

public class FileUploadDTO
{
 
    public FileCategory fileCategory { get; set; }
    public FileEssence fileEssence { get; set; }
    public FileType fileType { get; set; }
    public string  headline { get; set; }

}

the parameters var is empty, not null but all values are null.

@tmsbrndz - it's a form full of parameters , ints and strings, filles b the user. — chana
– chana, Commented May 4, 2021 at 7:20

tmsbrndz · Accepted Answer · 2021-05-04 08:57:00Z

2

To formData you can append blob or string. So you can append values to formData and send it to backend. At backend you can get post parameters via FromForm attribute.

Here is my example:

const formData = new FormData(); 
formData.append('file', this.file);
formData.append('fileType', this.fileForm.get('fileType').value);
formData.append('fileCategory', this.fileForm.get('fileCategory').value);

Get formData on backend:

public void FormHandler([FromForm] string fileType, [FromForm] string fileCategory, [FromForm] IFormFile file){
// do the stuff
}

edited May 4, 2021 at 8:57

answered May 4, 2021 at 7:31

tmsbrndz

1,3472 gold badges9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

chana Over a year ago

@tmsbrndz- I tried public void FormHandler([FromForm] FileUploadDTO parameters, [FromForm] IFormFile file){ // do the stuff }, the parameters return empty

chana Over a year ago

@tmsbrndz- I updates my question, please check it out, thanks

tmsbrndz Over a year ago

From where file is coming?

chana Over a year ago

the problem is not with the file bu with the parameters.

chana Over a year ago

uploadFile(event) { this.file = event[0]; }

|

Collectives™ on Stack Overflow

Upload file with parameters Angular 10 to .Net Core Web API using FormData

1 Answer 1

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Linked

Related