HttpPostedFileBase in model generates three

Question

I am facing a weird phenomenon which I can reproduce every time.

My model is:

[Display(Name = "Upload File")]
[DataType(DataType.Upload)]
public System.Web.HttpPostedFileBase file { get; set; }

My Razor is (I leave out the css classes):

@Html.LabelFor(m => m.file)
@Html.EditorFor(m => m.file, new { htmlAttributes = new { @type = "file" } })

The above gives:

Where did the three <input type="file"> come from?

However, if in the model I change the type of file to string (instead of HttpPostedFileBase) then one <input type="file"> shows.

How do I have a file upload control using a Html helper in the Razor page?

Is it enough to just have `@Html.EditorFor(m => m.file)`? I tried to repro and get 3 other inputs, each named `ContentLength`, `ContentType` and `FileName` while using `new { htmlAttributes = new { @type = "file" } }`, but not while using `TextBoxFor` helper. — Tetsuya Yamamoto, Jan 28 '19 at 03:53
Don't use editor. If using helper then use textbox with type attribute set via helper or manual provide an input tag with necessary attributes. Editor will create input for public properties of bound model property — Nkosi, Jan 28 '19 at 03:55
@Both, does `TextBoxFor` give the file control? Earlier I tried that, but it gave me a text box, despite an explicit `@type="file"`. — Old Geezer, Jan 28 '19 at 04:03
I created [a fiddle](https://dotnetfiddle.net/NLbKVf) to show file upload with `TextBoxFor` helper, make sure the property type set to `HttpPostedFileBase` too. As I tested out, `EditorFor` tried to create inputs for several public properties inside `HttpPostedFileBase`. — Tetsuya Yamamoto, Jan 28 '19 at 04:07
Possible duplicate of [Can EditorFor() be used to create ?](https://stackoverflow.com/questions/6113390/can-editorfor-be-used-to-create-input-type-file) — Tetsuya Yamamoto, Jan 28 '19 at 04:13

score 1 · Answer 1 · answered Jan 28 '19 at 04:06

If you want to use the EditorFor you will need to specify one for HttpPostedFileBase. Under Views/Shared/EditorTemplates add a file called HttpPostedFileBase.cshtml with content like this (Set Build to Content):

@model HttpPostedFileBase
@{
    var htmlAttributes = HtmlHelper.AnonymousObjectToHtmlAttributes(ViewData["htmlAttributes"]);
    htmlAttributes["type"] = "file";
}
@Html.TextBoxFor(model => model, htmlAttributes)

Tetsuya Yamamoto · Accepted Answer · 2019-01-28T04:08:16.323

As far as I know in MVC 4, EditorFor helper doesn't support htmlAttributes yet (this object parameter is available for MVC 5.1 or above), usually the file input from HttpPostedFileBase property is generated by using TextBoxFor helper:

@Html.TextBoxFor(m => m.file, new { type = "file" })

Note:

While trying to use htmlAttributes inside EditorFor, I found that the helper generates other 3 inputs, each named ContentLength, ContentType and FileName, hence I suspected the helper created inputs from several public property members of HttpPostedFileBase class instead of the property itself.

HttpPostedFileBase in model generates three

2 Answers2