IFormFile is returning NULL in ASP.NET Core 3.0

Question

I already read similar posts as mine, but they didn't help.
So what is happening is I am following kudvenkat's asp.net core mvc tutorial series.
I have a simple form with some fields that work perfectly fine, and they are sending data normally, but the field for Photo upload does not work. Whenever I hit Submit button, a field of an object ( model.Photo ) that should hold file name in HomeController is null . It might has something with changes made from 2.1 to 3.0 version of asp.net core, but I am only guessing.

Create.cshtml (I pasted only code of that field and submit button, form method is set to POST)

<div class="form-group">
     <label asp-for="Photo"></label>
     <div class="custom-file">
        <input asp-for="Photo" class="form-control custom-file-input" formenctype="multipart/form-data"/>
        <label class="custom-file-label">Choose file...</label>
     </div>
</div>
<div>
    <button class="btn btn-secondary" type="submit"><i class="fas fa-plus-square"></i> Create</button>
</div>

HomeController.cs (I pasted only code of intrest for this problem, I can show the rest of code if you ask for)

public IActionResult Create(EmployeeCreateViewModel model)
        {
            if(ModelState.IsValid)
            {
                string uniqueFileName = null;
                if(model.Photo != null)
                {
                    string uploadsFolder = Path.Combine(hostingEnviroment.WebRootPath, "img");
                    uniqueFileName = Guid.NewGuid().ToString() + "_" + Path.GetFileName(model.Photo.FileName);
                    string filePath = Path.Combine(uploadsFolder, uniqueFileName);
                    model.Photo.CopyTo(new FileStream(filePath, FileMode.Create));
                }

                Employee newEmployee = new Employee
                {
                    FirstName = model.FirstName,
                    LastName = model.LastName,
                    Email = model.Email,
                    Department = model.Department,
                    Job = model.Job,
                    Address = model.Address,
                    Birthday = model.Birthday,
                    PhotoPath = uniqueFileName
                };

                _employeeRepository.Add(newEmployee);

                return RedirectToAction("Details", new { id = newEmployee.Id });
            }

            return View();
        }

EmployeeCreateViewModel.cs

    public class EmployeeCreateViewModel
    {
        [Required]
        [Display(Name = "First name")]
        public string FirstName { get; set; }
        [Required]
        [Display(Name = "Last name")]
        public string LastName { get; set; }
        [Required]
        [RegularExpression(@"^[a-zA-Z0-9_.+-]+@coreuniverse.com",
        ErrorMessage = "Invalid email format. Follow pattern: etc@coreuniverse.com")]
        public string Email { get; set; }
        [Required]
        public Dept? Department { get; set; }
        [Required]
        public string Job { get; set; }
        [Required]
        public string Birthday { get; set; }
        [Required]
        public string Address { get; set; }
        public IFormFile Photo { get; set; }
    }

This picture shows a breakpoint when Create() action is triggered. It proves that the value is NULL

Answer 1

I assume that you're facing with the error at :

if(model.Photo != null)
{
      string uploadsFolder = Path.Combine(hostingEnviroment.WebRootPath, "img");
      uniqueFileName = Guid.NewGuid().ToString() + "_" + Path.GetFileName(model.Photo.FileName);
      string filePath = Path.Combine(uploadsFolder, uniqueFileName);
      model.Photo.CopyTo(new FileStream(filePath, FileMode.Create));
}

First of all could you please try to change your input field as following:

<input asp-for="Photo" type='file' value='@Model.Photo' class="form-control custom-file-input" formenctype="multipart/form-data"/>

Added type='file' & value='@Model.Photo'

Now you should send type of IFormFile value to your action.

Answer 2

Ensure that your form must contain enctype="multipart/form-data" as follows:

<form  method="post" enctype="multipart/form-data">
    <div class="form-group">
       <label asp-for="Photo"></label>
       <div class="custom-file">
           <input asp-for="Photo" class="form-control custom-file-input"/>
           <label class="custom-file-label">Choose file...</label>
       </div>
    </div>
    <input type="submit" value="Upload Image" name="submit">
</form>