How to upload a file at the same time as sending an Asp.net mvc 5 form

Question

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

My VM Vmdominiocreate:

    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 gets 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 on the VM:

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

And the extra entry on 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 button it generates 3 Texts Boxs (Contentlength, Contenttype and Filename). What does not suit me.

What I’m doing wrong?

I want him to create a find file button and when I do the form Submit he plays the image together.

UPDATING

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

Now instead of three text Boxs it showed the select file button but still continues showing 3 buttons, as before showed 3 text Boxs. The buttons come with the same buttons (Contentlength, Contenttype and Filename).

UPDATING

New attempt 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 do not appear the 3 fields.

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

Answer 1

Use Textboxfor to create 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 attribute

@using (Html.BeginForm("ACTION", "CONTROLLER", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    //inputs aqui
}