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

Betsq9 · Accepted Answer · 2021-06-02 14:14:36Z

1

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

answered Jun 2, 2021 at 14:14

Betsq9

1552 gold badges3 silver badges15 bronze badges

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

Comments

Serge · Accepted Answer · 2021-05-31 18:36:54Z

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, 2021 at 18:36

Serge

44.4k4 gold badges26 silver badges53 bronze badges

6 Comments

Betsq9 Over a year ago

I have tried already, I tried a lot of things, but it didn’t work.

Serge Over a year ago

Did you try add [FromBody] for example?

Betsq9 Over a year ago

Yes, I tryed [FromBody] and [FromForm]

Serge Over a year ago

And I don't know what is Restaurant is, but did you try to append it to the form too?

Serge Over a year ago

And I am not sure that you need to add const headers = new HttpHeaders().append("Content-Disposition", "multipart/form-data") explicitely

|

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related