Why is my input type="file" always returning null to the viewmodel in ASP.NET MVC and Entity Framework

Question

I have a page that uses a post method to get send some information to a view model, it returns all the values except the file which it is set as null as this screenshot shows:

image shows the file value as null in the view model

I tried to set the byte[] to a certain known length but that didn't help either.

This is the part of the code where I think the issue is

<div>
    <form asp-controller="ProfilePage" asp-action="UploadProfilePicture" method="post" enctype="multipart/form-data">
                <input asp-for="EmployeeNumber" type="hidden"  />
                <input asp-for="FirstName" type="hidden"  />
                <input asp-for="LastName" type="hidden"  />
                <input asp-for="TeamID" type="hidden"  />
                <input asp-for="Role" type="hidden"  />
                <input asp-for="SuggestionCount" type="hidden" onchange="fileCheck(this);" />
                <input asp-for="ProfilePicture" type="file" onchange="filecheck(this)" />
                <input type="Submit" value="Submit" />
    </form>
</div>

Below is the full code pages if you might want to look at them

@model NordicDoorSuggestionSystem.Models.Employees.ProfileViewModel

@{
    ViewBag.Title = "Profil § NSS";
    Layout = "~/Views/Shared/_ProfileLayout.cshtml";
}

<center>
    <div id="cardContainer" class="cardContainer">
        <div class="card">
            <div class="cardPicture">
                <i class="fa fa-user" style="font-size:75px; color: grey;"></i>
                <button class="profileUpload" type="button" name="button">Nytt bilde</button>
                <@*form asp-controller="ProfilePage" asp-action="UploadProfilePicture" method="get">
                    <input type="image" name="NewProfilePicture" id="NewImageData" onchange="fileCheck(this);" />
                </form>*@
            </div>
            <div class="cardHeader">
                <label>@Html.DisplayFor(model => model.FirstName) @Html.DisplayFor(model => model.LastName)</label>
            </div>
            <div class="cardProfileInfo">
                <p>Ansatt nr: <label>@Html.DisplayFor(model => model.EmployeeNumber)</label> </p>
                <p>Rolle: <label>@Html.DisplayFor(model => model.Role)</label> </p>
                <p>Team: <label>@Html.DisplayFor(model => model.TeamName)</label> </p>
            </div>
            <div>
                <form asp-controller="ProfilePage" asp-action="UploadProfilePicture" method="post" enctype="multipart/form-data">
                    <input asp-for="EmployeeNumber" type="hidden"  />
                    <input asp-for="FirstName" type="hidden"  />
                    <input asp-for="LastName" type="hidden"  />
                    <input asp-for="TeamID" type="hidden"  />
                    <input asp-for="Role" type="hidden"  />
                    <input asp-for="SuggestionCount" type="hidden" onchange="fileCheck(this);" />
                    <input asp-for="ProfilePicture" type="file" onchange="filecheck(this)" />
                    <input type="Submit" value="Submit" />
                </form>
 
            </div>
            <div class="showMyStats">
                <center>
                    <div class="stats">
                          <div class="present">
                            <div class="lid">
                                <span></span>
                            </div>
                        <div class="promo">
                            <p>DU HAR</p>
                            <h2>@Html.DisplayFor(model => model.SuggestionCount) Forslag!</h2>
                        </div>
                        <div class="box">
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    </div>
                </center>
            </div>
        </div>
    </div>
</center>

---

public class ProfilePageController : Controller
{
    private readonly UserManager<User> _userManager;
    private readonly DataContext _context;
    private readonly IEmployeeRepository _employeeRepository;

    public ProfilePageController(UserManager<User> userManager, DataContext context, IEmployeeRepository employeeRepository)
    {
        _userManager = userManager;
        _context = context;
        _employeeRepository = employeeRepository;
    }

    // GET: /<controller>/
    public async Task<IActionResult> Index()
    {
        var currentUser = await _userManager.GetUserAsync(HttpContext.User);
        ProfileViewModel vm = new ProfileViewModel();
        if (currentUser == null)
        {
            return NotFound();
        }
        var employee = _employeeRepository.GetEmployeeByNumber(currentUser.EmployeeNumber);
        vm.EmployeeNumber = currentUser.EmployeeNumber;
        vm.FirstName = currentUser.FirstName;
        vm.LastName = currentUser.LastName;
        vm.Role = currentUser.Role;
        vm.TeamID = employee.TeamID;
        var teamname = _context.Team.Where(e => e.TeamID.Equals(employee.TeamID)).Select(e => e.TeamName).FirstOrDefault();
        vm.TeamName = teamname;
        vm.SuggestionCount = employee.SuggestionCount;
        //vm.ProfilePicture = employee.ProfilePicture; 
        return View(vm);
    }

    // GET: /<controller>/
    public IActionResult Statistic()
    {
        return View();
    }

    //byte[] picture ???
    [HttpPost]
    public async Task<IActionResult> UploadProfilePicture(ProfileViewModel profilevm)
    {
        //byte[] ImageToByteArray(System.Drawing.Image imageIn)
        //{
        //    using (var ms = new MemoryStream())
        //    {
        //        imageIn.Save(ms, imageIn.RawFormat);
        //        return ms.ToArray();
        //    }
        //}

        //var Imgtemp = new byte[16777215];
        //Imgtemp[16777215] = ImageToByteArray(profilevm.ProfilePicture);

        var employee = new Employee
        {
            EmployeeNumber = profilevm.EmployeeNumber,
            FirstName = profilevm.FirstName,
            LastName = profilevm.LastName,
            Role = profilevm.Role,
            TeamID = profilevm.TeamID,
            ProfilePicture = profilevm.ProfilePicture,
            SuggestionCount = profilevm.SuggestionCount,
        };
        _employeeRepository.Update(employee);

        return RedirectToAction("Index");
    }
}

namespace NordicDoorSuggestionSystem.Models.Employees
{
    public class ProfileViewModel
    {
        public int EmployeeNumber { get; set; }
        public string? FirstName { get; set; }
        public string? LastName { get; set; }
        public string? AccountState { get; set; }
        public string Role { get; set; }
        public byte[]? ProfilePicture { get; set; }
        public int? TeamID { get; set; }
        public int? SuggestionCount { get; set; }
        public string? TeamName { get; set; }
    }
}

The code is used in my 3rd semester uni project

This is the screenshot of the employee entity part that stores the picture

picture shows the long blob that will store images

Answer 1

input type="file" always returning null

Try to use IFormFile, make change to your model

public IFormFile ProfilePicture { get; set; }

and in the form:

 <input asp-for="ProfilePicture" type="file" onchange="filecheck(this)" />

result: