IFormFile property in ViewModel is NOT binding

Question

When I try to post QuizCreate view model which contains List<IFormFile> property, it's not binding and is always NULL.

I have a view model for POST form QuizCreate.cs :

public class QuizCreate
{
    public string Name { get; set; }
    public List<QuizBanner> QuizBanners { get; set; }

    public QuizCreate()
    {
        this.QuizBanners = new List<QuizBanner>
        {
            new QuizBanner()
        };
    }
}

Here is QuizBanner.cs :

public class QuizBanner
{
    public string Name { get; set; }
    public string Description { get; set; }
    public IFormFile ImageFile { get; set; }
}

Here is a view with a form POST QuizCreate.cshtml :

@model QuizCreate

<form asp-action="CreateNewQuiz" asp-controller="Quiz" method="post" enctype="multipart/form-data" id="form-create-new-quiz">
    
    @Html.TextBoxFor(model => model.Name, new { @class = "form-control"})
    @Html.EditorFor(model => model.QuizBanners)
    
    <input type="submit" value="Create New Quiz"/>

</form>

Here is my EditorTemplate QuizBanner.schtml :

@model QuizBanner

@Html.TextBoxFor(banner => banner.Name, new { @class = "form-control" })
@Html.TextBoxFor(banner => banner.Description, new { @class = "form-control" })
<input asp-for="@Model.ImageFile" type="file" name="ImageFile" class="form-control"/>

Here are QuizController methods:

public IActionResult CreateQuiz()
{
    return View(new QuizCreate());
}

[HttpPost]
public async Task<IActionResult> CreateNewQuiz(QuizCreate quizCreate)
{
    // insert in DB logic
}

So, I populate all the inputs with some data and upload an image from local folder.
When I submit the form, inside CreateNewQuiz method we can see that all the fields are binding correctly except the IFormFile ImageFile - it is always null.

values after POST (ImageFile is NULL)

What can be the reason for this?
I have tried many different solutions from StackOverflow but nothing helped.

Answer 1

post QuizCreate view model which contains List property, it's not binding and is always NULL.

Make sure you have add enctype="multipart/form-data" in the view which you pass the ImageFile. Besides I guess the problem maybe something with model binding . You can refer to the below code to bind the List<IFormFile> property, in QuizCreate.cshtml :

 @model QuizCreate
<form asp-action="CreateNewQuiz" asp-controller="Quiz" method="post" enctype="multipart/form-data" id="form-create-new-quiz">

    @Html.TextBoxFor(model => model.Name, new { @class = "form-control"})


   @*  @Html.EditorFor(model => model.QuizBanners) *@
    
    @for (int i = 0; i < Model.QuizBanners.Count; i++)
    {
       
        @Html.TextBoxFor(banner => banner.QuizBanners[i].Name, new { @class = "form-control" })
        @Html.TextBoxFor(banner => banner.QuizBanners[i].Description, new { @class = "form-control" })
        <input asp-for="@Model.QuizBanners[i].ImageFile" type="file" class="form-control" />
    }
    <input type="submit" value="Create New Quiz" />

</form>

And the QuizCreate class:

public class QuizCreate
{
    public string Name { get; set; }
    public List<QuizBanner> QuizBanners { get; set; }

    public QuizCreate()
    {
        Name = "Q1";
        this.QuizBanners = new List<QuizBanner>
    {
        new QuizBanner(){Name="aa",Description="dd"}
         
    };
    }
}

result: