How to upload file at the same time as submitting an asp.net mvc form 5

Navigation
2

I already have a form that does a registration, I want to add an additional field in it where the user will upload a photo, I want to do everything in the same submit.

My VM VMdomainCreate VM: 

    public class VMDominioCreate
    {

        [Required]
        [StringLength(200)]
        [Display(Name = "URL")]
        public string url { get; set; }

        [Display(Name = "ID C")]
        [StringLength(100)]
        public string idC { get; set; } 

        [Display(Name = "ID S")]
        [StringLength(100)]
        public string idS { get; set; } 

    }

My method that receives the create: 

        public async Task<ActionResult> Create(VMDominioCreate d)
        {
            if (ModelState.IsValid)
            {
              ....
            }
          
          }

My form: 

@using (Html.BeginForm())
            {
                    @Html.AntiForgeryToken()

                    <div class="row">
                        
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                        <div class="form-group col-lg-4">
                            @Html.LabelFor(model => model.url)
                            @Html.EditorFor(model => model.url, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.url, "", new { @class = "text-danger" })
                        </div>

                        <div class="form-group col-lg-4">
                            @Html.LabelFor(model => model.idC)
                            @Html.EditorFor(model => model.idC, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.idC, "", new { @class = "text-danger" })
                        </div>

                        <div class="form-group col-lg-4">
                            @Html.LabelFor(model => model.idS)
                            @Html.EditorFor(model => model.idS, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.idS, "", new { @class = "text-danger" })
                        </div>

                        


                        <div class="clearfix"></div>
                        <div class="form-group col-lg-12">
                            <input type="submit" [email protected] class="btn btn-default" />
                        </div>
                    </div>
                }

All this works perfectly. I want to include the following:

One more field in VM: 

[Required]
public HttpPostedFileBase File { get; set; }

And the more entry in the form: 

<div class="form-group col-lg-4">
                            @Html.LabelFor(model => model.File)
                            @Html.EditorFor(model => model.File, new { htmlAttributes = new { @class = "form-control" }})
                            @Html.ValidationMessageFor(model => model.File, "", new { @class = "text-danger" })
                        </div>
Here comes the problem, instead of generating a Find File button it generates 3 text boxes (ContentLength, ContentType and FileName). What does not answer me.

What am I doing wrong?

I want it to create a Find File button and when I make the submit of the form it throws the image together.

UPDATE

I tried what was suggested in the comment (include @ type="file") and got the following result:

Now instead of three text boxs he showed the select file button, but still continues showing 3 buttons, as before he showed 3 text boxes. The buttons come with the same labels (ContentLength, ContentType and FileName).

UPDATE

Retry with: 

@Html.TextBoxFor(model => model.File, new { htmlAttributes = new { @class = "form-control", @type="file" }})

It displays a single text box, it is no longer a button to select the file, but at least the 3 fields do not appear.

I put a directory of a file in the text box and had it submitted, the field is still null.

    
asked by anonymous 02.11.2015 / 22:58

1 answer

3

Use TextBoxFor to create the input 

@Html.TextBoxFor(model=>model.File, null, new { type="file", @class="form-control" })

For sending any type of file, your form must also contain the enctype 

@using (Html.BeginForm("ACTION", "CONTROLLER", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    //inputs aqui
}
    
02.11.2015 / 23:52
Create a mock for any instance of a class Input does not load style disabled