How to create MVC 4 @Html.TextBox type="file"?

Question

I need to add the following field at my form

<input type="file" class="input-file" />

I create model and describe this field (the last field)

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;

 namespace CorePartners_Site2.Models
 {
     public class FeedbackForm
     {
    public string Name { get; set; }
    public string Email { get; set; }
    public string Phone { get; set; }
    public string Company { get; set; }
    public string AdditionalInformation { get; set; }
    public HttpPostedFileBase ProjectInformation { get; set; }
     }
 }

and create

@Html.TextBox(null, null, new { type="file", @class="input-file" })

but it doesnt work, I get some exception. What's wrong?

What error? And why you define null value to name attribute? I mean use like this: `@Html.TextBox("ProjectInformation", null, new { type="file", @class="input-file" })` — AliRıza Adıyahşi, May 20 '13 at 07:36
yes, I understood now, I create `@Html.TextBox("file", null, new { type="file", @class="input-file" })` and I get `` but I dont need id here. How to create the field without id? — Heidel, May 20 '13 at 07:41
But if you dont use id you cant bind file to model. And one more suggestion, if you use `ProjectInformation` for id, then mvc will bind file to your model automaticly. — AliRıza Adıyahşi, May 20 '13 at 07:44
So, I should do that? `@Html.TextBox("ProjectInformation", null, new { type="file", @class="input-file", id="ProjectInformation" })` — Heidel, May 20 '13 at 07:47
You should define a name property for htmlHelpers. But you can define what you want for id. I say if you define same like your model, it will bind automaticly. If dont, you should specify it in your controller side — AliRıza Adıyahşi, May 20 '13 at 07:50
If you want , I can an write example for you with your model? — AliRıza Adıyahşi, May 20 '13 at 07:51

score 17 · Accepted Answer · edited Mar 04 '19 at 11:08

17

Model

public class FeedbackForm
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Phone { get; set; }
    public string Company { get; set; }
    public string AdditionalInformation { get; set; }
    public HttpPostedFileBase ProjectInformation { get; set; }
}

View

@model FeedbackForm

@Html.TextBox("Name")
@Html.TextBox("Email")
...
@Html.TextBox("ProjectInformation", null, new { type="file", @class="input-file" })

// submit button

My recommended view (strongly - typed)

@model FeedbackForm

@Html.TextBoxFor(model=>model.Name)
@Html.TextBoxFor(model=>model.Email)
...
@Html.TextBoxFor(model=>model.ProjectInformation, null, new { type="file", @class="input-file" })

// submit button

Controller

[HttpPost]
public ActionResult FeedbackForm(FeedbackForm model)
{
    // this is your uploaded file
    var file = model.ProjectInformation;
    ...

    return View();
}

MVC is using name convention, so if your textbox and model names match, then MVC will bind your inputs to your model.

edited Mar 04 '19 at 11:08

Cosmin

2,365
2
23
29

answered May 20 '13 at 07:56

AliRıza Adıyahşi

15,658
24
115
197

Thank u! If my view was created not strongly-typed, I need to create the view again? – Heidel May 20 '13 at 08:03
1

No, just change helpers. Add "-For" suffix to your html helpers, and use lambda expr. like (x => x.someProp) for name specifiying. – AliRıza Adıyahşi May 20 '13 at 08:28
Not working when using ajax $(this).serialize() it return ProjectInformation null – Esha Garg Jun 03 '13 at 07:28
1

@EshaGarg, You cannot upload file with ajax. You must use any plug in. – AliRıza Adıyahşi Jun 03 '13 at 09:24
how can I change the input file button text? now it's set to "Broese..." by default. – Katy Aug 21 '15 at 06:09
@Katy, there is no setting to change it. Check [this](http://stackoverflow.com/questions/5138719/change-default-text-in-input-type-file) – AliRıza Adıyahşi Aug 21 '15 at 06:15
What type should I use in the database for `HttpPostedFileBase`? – carloswm85 Oct 31 '22 at 13:03

score 5 · Answer 2 · answered Sep 04 '14 at 07:06

I think you are getting a null because you have not specified the enctype in your form tag.

@using (Html.BeginForm("ActionMethodName", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" })) { }

A working example always help.

Visit http://www.mindstick.com/Articles/cf1e1dd9-fdba-4617-94f0-407223574447/?Upload%20File%20in%20Asp.Net%20Mvc%204

score 3 · Answer 3 · edited Oct 23 '15 at 06:43

3

You can use the below syntax

@Html.TextBoxFor(model=>model.Email, new { @type="file", @class="input-file" })

edited Oct 23 '15 at 06:43

HaveNoDisplayName

8,291
106
37
47

answered Apr 18 '14 at 17:20

Tanmay

31
1

2

The `@` in `@type="file"` is unnecessary. – Sheridan Nov 27 '14 at 12:49

score 2 · Answer 4 · edited Dec 17 '15 at 16:58

2

I solved this problem using enctype="multipart/form-data"

@using (Html.BeginForm("SalvarEvidencia", "Evidencia", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    ...
}

edited Dec 17 '15 at 16:58

Charles Clayton

17,005
11
87
120

answered Dec 17 '15 at 16:14

Henrique Brandão

21
1

score 1 · Answer 5 · answered May 20 '13 at 07:58

1

There's nothing wrong with just using the input tag directly in your view. You aren't required to use a helper.

<input type="file" class="input-file" />

Just make sure it's within your BeginForm declaration block.

answered May 20 '13 at 07:58

Erik Funkenbusch

92,674
28
195
291

score 0 · Answer 6 · answered May 20 '13 at 07:38

0

You need to specify the name of the field. If you don't want a name, nor a value, it's better to just include the field as is in your form.

It doesn't make sense to use a helper, if there's nothing dynamic about it.

answered May 20 '13 at 07:38

Kenneth

28,294
6
61
84

score -1 · Answer 7 · answered Oct 21 '15 at 12:45

-1

  @using (Html.BeginForm("Action_Name", "Controller_Name",FormMethod.Post))
   {
        @Html.TextBoxFor(m => m.Email, new {@class = "text_field"})
        @Html.ValidationMessageFor(m => m.Email)
   }

answered Oct 21 '15 at 12:45

user3452580

37
2

How does this answer the question? – Richard Seal Oct 26 '15 at 19:54

How to create MVC 4 @Html.TextBox type="file"?

7 Answers7

Linked