Question

I’m trying to allow users to upload an image by an html form, and I want to store it as a byte[] in my model.(will be stored in db) Unless I should be using something else instead of byte[]?

This is what my form looks like

@using (Html.BeginForm()) {
@Html.ValidationSummary(true)

<fieldset>
    <legend>ImageUploadModel</legend>

    @Html.DisplayFor(model => model.Image)
   <input type="file" name="Image" id="Image" accept="image/*" />

    @Html.DisplayFor(model => model.Caption)
    @Html.EditorFor(model => model.Caption)
    <p>
        <input type="submit" value="Create" />
    </p>
</fieldset>

}

Here is what my controller looks like right now

[HttpPost]
    public ActionResult Create(ImageUploadModel model)
    {
           // do stuff

        return View();
    }

And here is what my ImageUploadModel looks like

public class ImageUploadModel
{
    public Guid UploadedBy { get; set; }

    [Display(Name = "Image")]
    public byte[] Image { get; set; }

    [Display(Name = "Image Caption")]
    public string Caption { get; set; }
}

When I try to upload a file I get an error about not being a valid base64string.

What is the proper way to get an uploaded file as a byte[] in MVC4 / C#

Thanks

Answer 1

Change your form tag like this (You may replace YourControllerName with your actual controller name)

@using (Html.BeginForm("Create", "YourControllerName", 
            FormMethod.Post, new { enctype = "multipart/form-data" }))
{
  <input type="file" name="Image" />
  <input type="file" name="Image" id="Image" 
  //your other form elements also
}

and
Change your POST action to accept an instance of HttpPostedFileBase and with the same name as of the input file element

[HttpPost]
public ActionResult Create(HttpPostedFileBase Image)
{
       // do stuff

    return View();
}