Image coming as null from view to controller in ASP.NET

Question

I have a small ASP NET web app that takes a description and an image from the view, when I add description and Image I click on submit button, the description is fine, but the image is always null and I have no idea why. This is my view:

@model List<aspnet_client.Models.DataModel>
@{
    ViewBag.Title = "AddData";
}

<h2>Añade nuevos registros</h2>
@using (Html.BeginForm("AddData", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.ValidationSummary(true, "", new { @class="text-danger"})
        <div class="form-inline">
            @if (Model != null && Model.Count > 0)
            {
                var iterator = 0;
                foreach (var i in Model)
                {
                    <div class="data-element">
                        <div class="description">
                            @Html.TextBoxFor(x => x[iterator].Description, new { @class = "form-control", placeholder = "Descripción" })
                            @Html.ValidationMessageFor(model => model[iterator].Description, "", new { @class="text-danger"})
                        </div>
                        <br />
                        <div>
                            <input type="file" name="Model.Image" id="Image" onchange="fileCheck(this);" />
                        </div>
                    </div>
                    <br />
                    iterator++;
                }
            }
     </div>
    <button type="submit" class="btn btn-success">Añadir Registros</button>
}

As you can see I am using new { enctype = "multipart/form-data" } in the form, so thats not the issue. This is the model:

using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

namespace aspnet_client.Models
{
    /// <summary>
    /// The DataModel class
    /// </summary>
    public class DataModel
    {
        /// <summary>
        /// Gets or sets the identifier.
        /// </summary>
        /// <value>
        /// The identifier.
        /// </value>
        public int Id { get; set; }

        /// <summary>
        /// Gets or sets the description.
        /// </summary>
        /// <value>
        /// The description.
        /// </value>
        [Required(ErrorMessage = "Se requiere una descripción")]
        [DisplayName("Descripción")]
        public string Description { get; set; }

        /// <summary>
        /// Gets or sets the image.
        /// </summary>
        /// <value>
        /// The image.
        /// </value>
        [Required(ErrorMessage = "Se requiere una imagen")]
        [DisplayName("Imagen")]
        public byte[] Image { get; set; }
    }
}

Action:

using aspnet_client.Models;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace aspnet_client.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public ActionResult AddData()
        {
            var records = new List<DataModel>();

            // Los registros se añadirán de 5 en 5 basado en los requerimientos de esta prueba
            var recordLimit = 5;

            for(int a = 0; a < recordLimit; a++)
            {
                records.Add(new DataModel());
            }

            return View(records);
        }

        [HttpPost]
        public ActionResult AddData(List<DataModel> records)
        {
            return View(records);
        }

        [HttpGet]
        public ActionResult GetDataRecords()
        {
            return View();
        }
    }
}

Could it be an issue with the image type being byte[] ??

Any help will be much appreciated!

Answer 1

You can use Request object to get the image but make sure to give name attribute of img as Image in your controller.

HttpPostedFileBase file = Request.Files["Image"];