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
– AliRıza Adıyahşi, Commented May 20, 2013 at 7:36
yes, I understood now, I create @Html.TextBox("file", null, new { type="file", @class="input-file" }) and I get <input class="input-file" id="file" name="file" type="file" value=""> but I dont need id here. How to create the field without id? — Heidel
– Heidel, Commented May 20, 2013 at 7: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
– AliRıza Adıyahşi, Commented May 20, 2013 at 7:44
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
– AliRıza Adıyahşi, Commented May 20, 2013 at 7:50
If you want , I can an write example for you with your model? — AliRıza Adıyahşi
– AliRıza Adıyahşi, Commented May 20, 2013 at 7:51

Cosmin · Accepted Answer · 2019-03-04 11:08:21Z

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 4, 2019 at 11:08

Cosmin

2,3652 gold badges25 silver badges31 bronze badges

answered May 20, 2013 at 7:56

AliRıza Adıyahşi

15.9k24 gold badges118 silver badges198 bronze badges

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

7 Comments

Heidel Over a year ago

Thank u! If my view was created not strongly-typed, I need to create the view again?

AliRıza Adıyahşi Over a year ago

No, just change helpers. Add "-For" suffix to your html helpers, and use lambda expr. like (x => x.someProp) for name specifiying.

Esha Garg Over a year ago

Not working when using ajax $(this).serialize() it return ProjectInformation null

AliRıza Adıyahşi Over a year ago

@EshaGarg, You cannot upload file with ajax. You must use any plug in.

Katy Over a year ago

how can I change the input file button text? now it's set to "Broese..." by default.

|

Julius Depulla · Accepted Answer · 2014-09-04 07:06:00Z

5

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

answered Sep 4, 2014 at 7:06

Julius Depulla

1,6331 gold badge13 silver badges27 bronze badges

Comments

HaveNoDisplayName · Accepted Answer · 2015-10-23 06:43:16Z

3

You can use the below syntax

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

edited Oct 23, 2015 at 6:43

HaveNoDisplayName

8,537106 gold badges41 silver badges50 bronze badges

answered Apr 18, 2014 at 17:20

Tanmay

311 bronze badge

1 Comment

Sheridan Over a year ago

The @ in @type="file" is unnecessary.

Charles Clayton · Accepted Answer · 2015-12-17 16:58:51Z

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, 2015 at 16:58

Charles Clayton

18.2k15 gold badges94 silver badges123 bronze badges

answered Dec 17, 2015 at 16:14

Henrique Brandão

211 bronze badge

Comments

Erik Funkenbusch · Accepted Answer · 2013-05-20 07:58:16Z

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, 2013 at 7:58

Erik Funkenbusch

93.7k29 gold badges201 silver badges292 bronze badges

Comments

Kenneth · Accepted Answer · 2013-05-20 07:38:25Z

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, 2013 at 7:38

Kenneth

28.8k7 gold badges65 silver badges85 bronze badges

Comments

Ayesha Mushtaq · Accepted Answer · 2015-10-21 12:45:04Z

-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, 2015 at 12:45

Ayesha Mushtaq

352 bronze badges

1 Comment

Richard Seal Over a year ago

How does this answer the question?

Collectives™ on Stack Overflow

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

7 Answers 7

7 Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related