How to upload "one" image to a database with Entity Framework and MVC 4

Question

I am trying to write an image upload service for my PostController in the Create action, however I am getting a compile error saying:

'System.Array' does not contain a definition for 'InputStream'/ContentLength and no extension method 'InputStream'/ContentLength accepting a first argument of type 'System.Array'

On these lines:

    using (var binaryReader = new BinaryReader(uploadImage.InputStream))
    {
        imageData = binaryReader.ReadBytes(uploadImage.ContentLength);
    }

I only want to upload one file and no more. I am also unsure if this is correct: singlepart/form-data in the Html.Begin form.

I did try HttpPostedFileBase uploadImage instead of HttpPostedFileBase[] uploadImage however I got an error of instance is not set to an object on this line:

using (var binaryReader = new BinaryReader(uploadImage.InputStream))

It should be noted that post.Picture is (varbinary(max)) in my Post table.

View:

@using (Html.BeginForm("Create", "Post", FormMethod.Post, new { enctype = "singlepart/form-data" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>

            <div class="col-xs-6 col-md-4">
                @Html.LabelFor(model => model.Picture)

            <div class="editor-field">
                <input type="file" name="uploadImages" class="input-files" />
                @Html.ValidationMessageFor(model => model.Picture)
            </div>
        </div>

Controller:

    [Authorize]
    public ActionResult Create()
    {
        return View();
    }
    [HttpPost]
    [ValidateAntiForgeryToken]
    [Authorize]
    public ActionResult Create([Bind(Include = "BlogUserEmail,CategoryId,Title,ShortDescription,Description")]Post post, HttpPostedFileBase[] uploadImage, string selectedTags)
    {
        if (uploadImage != null)
        {
            return RedirectToAction("Create");
        }

        byte[] imageData = null;

        using (var binaryReader = new BinaryReader(uploadImage.InputStream)) // not set to an instance of an object
        {
            imageData = binaryReader.ReadBytes(uploadImage.ContentLength);
        }
        var Image = new Post
        {
             Picture = imageData
        };

        post.Picture = Image.Picture;

adricadar · Accepted Answer · 2015-04-25 08:20:37Z

1

You get this error because you have an Array of objects and you try to use ContentLength/InputStream which is a property of HttpPostedFileBase

Instead of uploadImage.InputStream you can take first element if you try tu upload just 1 image uploadImage[0].InputStream or uploadImage.First().InputStream. Or instead you can remove [].

Also you have to change enctype from "singlepart/form-data" to "multipart/form-data"

The input have the name uploadImages and the parameter of the action uploadImage, change the input according

<input type="file" name="uploadImage" class="input-files" />

I recommend you to use a model that will encapsulate all form elements.

public class PostCreateModel : Post
{
    public HttpPostedFileBase uploadImage { get; set; }
    public string selectTags { get; set; }
}

And Action will look like this. Don't forget to change @model in View.

public ActionResult Create(PostCreateModel post)
{
    if (post.uploadImage != null)
    {
        return RedirectToAction("Create");
    }

    byte[] imageData = null;

    using (var binaryReader = new BinaryReader(post.uploadImage.InputStream)) // not set to an instance of an object
    {
        imageData = binaryReader.ReadBytes(post.uploadImage.ContentLength);
    }
    var Image = new Post
    {
         Picture = imageData
    };

    post.Picture = Image.Picture;

edited Apr 25, 2015 at 8:20

answered Apr 25, 2015 at 8:03

adricadar

10.2k5 gold badges35 silver badges47 bronze badges

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

6 Comments

G Gr Over a year ago

With those changes I still get the error: Object reference not set to an instance of an object. on the uploadImage[0].InputStream line...

G Gr Over a year ago

Picture is set to public byte[] Picture { get; set; } in my model Post

G Gr Over a year ago

Doing it your way will still causes the object reference issue. If I do it in another model or I do it in the action directly it makes no difference.

adricadar Over a year ago

@GarrithGraham See my update, you have uploadImages instead of uploadImage.

G Gr Over a year ago

Yeah that fixed the object reference however now I have another issue, nothing is in my database... :( ty tho for the help

|

Marian Polacek · Accepted Answer · 2015-04-25 08:00:27Z

1

You are correctly worried about singlepart/form-data, since it is not valid encoding method. Html forms support following encodings:

application/x-www-form-urlencoded (the default)
multipart/form-data (allows posting of files)
text/plain

So you have to use multipart/form-data to post files.

Then you can modify Create method to only accept single HttpPostedFileBase"

public ActionResult Create([Bind(Include = "BlogUserEmail,CategoryId,Title,ShortDescription,Description")]Post post, HttpPostedFileBase uploadImage, string selectedTags)

answered Apr 25, 2015 at 8:00

Marian Polacek

2,9254 gold badges31 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to upload "one" image to a database with Entity Framework and MVC 4

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related