Entity Framework 5 Code first adding an image

Question

I am writing a very small application with mvc4 and entity framework 5.

I want to add a product and store and image for the product.

I have a model

  [Table("CatalogItem")]
public class CatalogItemModel
{
    [Key]
    public int CatalogItemId { get; set; }

    public string Description { get; set; }

    public double Price { get; set; }

    public int ProductCount { get; set; }

    public string Size { get; set; }

    public string Sku { get; set; }

    [Column(TypeName = "image")]


    public byte[] Image { get; set; }

    [Display(Name = "Display Catalog Item")]
    public bool DisplayItem { get; set; }
}

My controller. This never gets hit.

 [HttpPost]
    public ActionResult Create(CatalogItemModel catalogitemmodel)
    {
        if (ModelState.IsValid)
        {
            db.CatalogItemModels.Add(catalogitemmodel);
            db.SaveChanges();
            return RedirectToAction("Index");
        }

        return View(catalogitemmodel);
    }

My views form

    <fieldset>
    <legend>CatalogItemModel</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Description)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Description)
        @Html.ValidationMessageFor(model => model.Description)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Price)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Price)
        @Html.ValidationMessageFor(model => model.Price)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.ProductCount)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.ProductCount)
        @Html.ValidationMessageFor(model => model.ProductCount)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Size)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Size)
        @Html.ValidationMessageFor(model => model.Size)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Sku)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Sku)
        @Html.ValidationMessageFor(model => model.Sku)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.DisplayItem)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.DisplayItem)
        @Html.ValidationMessageFor(model => model.DisplayItem)
    </div>
    <div class="editor-label">
        @Html.LabelFor(m=>m.Image)
    </div>

    <input name="Image" type="file"/>
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

When I try posting a new catalog with an image within my file input however it throws an error

The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters.

Answer 1

Try to fix like that:

1 . Replace

<input name="Image" type="file"/> with <input name="ImageFile" type="file"/>

2 . In controller:

        [HttpPost]
        public ActionResult Create(CatalogItemModel catalogitemmodel, HttpPostedFileBase ImageFile)
        {
            using (var ms = new MemoryStream())
            {
                ImageFile.InputStream.CopyTo(ms);
                catalogitemmodel.Image =  ms.ToArray();
            }

            if (ModelState.IsValid)
            {
                db.CatalogItemModels.Add(catalogitemmodel);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(catalogitemmodel);
        }