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.

@NickW just added the controller action. I have added a breakpoint however it never gets hit — Diver Dan
– Diver Dan, Commented Nov 1, 2012 at 10:06
What about catalogitemmodel? How does this get created? If your breakpoint is not getting hit then the problem is earlier on. — nick_w
– nick_w, Commented Nov 1, 2012 at 10:08
Sorry I am trying out code first so it takes care of it for me — Diver Dan
– Diver Dan, Commented Nov 1, 2012 at 10:10
What I mean is, what is the code at the point you are assigning the byte array of your image to CatalogItemModel.Image? — nick_w
– nick_w, Commented Nov 1, 2012 at 10:12

testCoder · Accepted Answer · 2012-11-01 11:38:45Z

9

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);
        }

answered Nov 1, 2012 at 11:38

testCoder

7,42513 gold badges59 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Diver Dan Over a year ago

thanks @testCoder however ImageFile is always returned as null. I have checked that the spelling is correct however no joy

Diver Dan Over a year ago

using var files = Request.Files I was able to get the image

testCoder Over a year ago

DiverDan do not forget this: @using (Html.BeginForm(null, null, FormMethod.Post, new { enctype = "multipart/form-data" })

Collectives™ on Stack Overflow

Entity Framework 5 Code first adding an image

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related