Uploading an image returns a null exception when I used html helper instead of an input tag

Question

hi everyone I am trying to create an application that allows the user to upload multiple images to a blog post for some reason the multiple images upload works when I use this:

<input id="ImagePath" title="Upload a product image" multiple="multiple" type="file" name="files" />

but not when I use the Html helper like this one

 @Html.TextBoxFor(model => model.ImagePath, new { type = "file", multiple = "multiple", name = "files"  })

The error I get is a null reference exception but are these not the same?

It appears on this line

 foreach (var file in files)

View

@model Crud.Models.PostModel
@{
    ViewBag.Title = "Create";
}
<h2>Create</h2>
@using (Html.BeginForm("Create", "Home", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <fieldset>
        <div class="editor-label">
            @*@Html.LabelFor(model => model.ImagePath)
            @Html.TextBoxFor(model => model.ImagePath, new { type = "file", multiple = "multiple", name = "files"  })
            @Html.ValidationMessageFor(model => model.ImagePath)*@


            @Html.LabelFor(model => model.ImagePath)
            <input id="ImagePath" title="Upload a product image" multiple="multiple" type="file" name="files" />
        </div>

        <div class="editor-field">
            @Html.LabelFor(model => model.Heading)
            @Html.TextBoxFor(model => model.Heading)
            @Html.ValidationMessageFor(model => model.Heading)
        </div>
        <div>
            @Html.LabelFor(model => model.PostBody)
            @Html.TextBoxFor(model => model.PostBody)
            @Html.ValidationMessageFor(model => model.PostBody)
        </div>
        <p><input type="submit" value="Create" /></p>
    </fieldset>
}
<div>
    @Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

Controller

public ViewResult Create()
{
    return View("Create", new PostModel());

}

[HttpPost]
public ActionResult Create(PostModel Post, IEnumerable<HttpPostedFileBase> files)
{
    if (ModelState.IsValid)
    {
        foreach (var file in files)
        {
            PostModel post = new PostModel();
            if (file.ContentLength > 0)
            {
                string displayName = file.FileName;
                string fileExtension = Path.GetExtension(displayName);
                string fileName = string.Format("{0}.{1}", Guid.NewGuid(), fileExtension);
                string path = Path.Combine(Server.MapPath("~/Img/"), fileName);
                file.SaveAs(path);
                post.ImageDisplayName = displayName;
                post.ImagePath = fileName;
                post.PostBody = Post.PostBody;
                post.Heading = Post.Heading;
            }
            repository.Save(post);

        }
    }
    return RedirectToAction("display");
}

Answer 1

Because this line of code

@Html.TextBoxFor(model => model.ImagePath, n
                            ew { type = "file", multiple = "multiple", name = "files"  })

will generate the html markup like this

<input id="ImagePath" multiple="multiple" name="ImagePath" type="file" value="">

Notice that the input element's name is still "ImagePath" ?Because the HTML helper method uses the property name when building the element name attribute value.

If you want to override it, use UPPER CASE attribute name.

This should work

@Html.TextBoxFor(model => model.ImagePath, 
                           new { type = "file", multiple = "multiple", NAME = "files"  })