How to pass other parameter with file to ASP.NET Core controller from Angular?

Question

I have a problem, I need to pass model as first a parameter, and as the second parameter, I need to pass a file

Adding a file to a form:

const formDate = new FormData();
formDate.append("File", this.file);

Sending data from angular:

this.dataService.createRestaurant(this.restaurant, formDate)
    .subscribe((data: Restaurant) => this.loadProducts(data))

Data sending service:

createRestaurant(model: Restaurant, form: FormData){
  const headers = new HttpHeaders().append("Content-Disposition", "multipart/form-data")
    return this.http.post(this.url, {model, form}, {headers: headers});
  }

Controller in Asp.net core:

public IActionResult Post(Restaurant restaurant, IFormFile File)
    {
       code...
    }

I tried to solve this problem for two days, the model is transferred normally, but the file is always null

score 1 · Accepted Answer · answered Jun 02 '21 at 14:14

This is how you shape the data into a form

const formDate = new FormData();
formDate.append("restaurant", JSON.stringify(this.restaurant));
formDate.append("file", this.file[0], this.file[0].name);

"this.restaurant" is exactly the same data model as in Asp.Net Core

Accept json data as in this question: ASP.NET Core and formdata binding with file and json property

score 0 · Answer 2 · answered May 31 '21 at 18:36

0

Try to change your action to this:

public IActionResult Post(RestaurantViewModel viewModel)
    {
       code...
    }

by creating a ViewModel

public RestaurantViewModel
{
public Restaurant restaurant {get; set;}
public IFormFile File {get; set;}
}

answered May 31 '21 at 18:36

Serge

40,935
4
18
45

I have tried already, I tried a lot of things, but it didn’t work. – Betsq9 May 31 '21 at 18:38
Did you try add [FromBody] for example? – Serge May 31 '21 at 19:04
Yes, I tryed [FromBody] and [FromForm] – Betsq9 May 31 '21 at 19:07
And I don't know what is Restaurant is, but did you try to append it to the form too? – Serge May 31 '21 at 19:12
And I am not sure that you need to add const headers = new HttpHeaders().append("Content-Disposition", "multipart/form-data") explicitely – Serge May 31 '21 at 19:13
restaurant is a model to which data is added – Betsq9 May 31 '21 at 19:15

How to pass other parameter with file to ASP.NET Core controller from Angular?

2 Answers2