IFormFile is null, Razor

Question

I'm trying to bind an image uploading but facing the problem with sending this image to the controller.

I'm using Razor and .net core 2.2. My Controller

[HttpPost(nameof(MealController))]
        [Authorize(Roles = UserRoles.Moderator)]
        public IActionResult Update(MealModel meal, IFormFile pic)
        {
            if (ModelState.IsValid)
            {
                try
                {
                    var changedMeal = _mapper.Map<MealModel, MealDTO>(meal);
                    _mealService.Update(changedMeal, pic);
                }
                catch (Exception e)
                {
                    return NotFound();
                }

                return RedirectToAction("Index");
            }

            return View(meal);
        }

My form

<form class="form" method="post" asp-controller="Meal" asp-action="Update">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Продукт</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="product">
                        <div class="product-img">
                            <div class="selector">
                                <img src="@Model.ImagePath" class="img-thumbnail" id="selectedImg" alt="Product Image"/>
                                <div class="form-group">
                                    <input type="file" class="custom-file-input" id="pic-input" name="pic"
                                           onchange="readURL(this, 'selectedImg')">
                                    @* <label class="custom-file-label" for="pic-input"></label> *@
                                </div>
                            </div>
                        </div>
                        <div class="product-info">
                            <div class="form-group name">
                                <label for="name">Назва продукту</label>
                                <input class="form-control" type="text" placeholder="Назва" id="name" name="name" asp-for="Name"
                                       value="@Model.Name">
                            </div>

                            <div class="form-group">
                                <label for="name">Ціна</label>
                                <input class="form-control" placeholder="Price" id="price" type="number" asp-for="Price"
                                       value="@Model.Price">
                            </div>
                            <div class="form-group">
                                <label for="name">Вага</label>
                                <input class="form-control" id="weight" type="number" asp-for="Weight"
                                       value="@Model.Weight">
                            </div>

                            <div class="comments">
                                <textarea class="form-control" rows="3" cols="5" placeholder="Склад" asp-for="Description" value="@Model.Description"></textarea>
                            </div>
                            <input type="hidden" asp-for="MealGroupId" value="@Model.MealGroupId"/>
                            <input type="hidden" asp-for="Id" value="@Model.Id"/>
                            @* <input type="hidden" asp-for="ImagePath" value="@Model.ImagePath"/> *@
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <div class="action-button">
                        <button type="submit"
                                class="btn btn-success ok-button">
                            <span>Додати</span>
                        </button>
                        <button type="reset"
                                class="btn btn-danger remove-button">
                            <span>Відмінити</span>
                        </button>
                    </div>
                </div>
            </div>
        </form>

When I debug, IFormFile is always null. I tried using [FromForm] but it didn't help. I googled and found out that my name in form and parameter name was different but it had effect. Could you, please give me a little hint on how I can solve it. Thank you and have a good day!

Answer 1

You have to specify <form>'s enctype attribute set to multipart/form-data to be able to send files to server

<form class="form" method="post" asp-controller="Meal" asp-action="Update" enctype="multipart/form-data">