How to pass other form data along with MVC File Upload?

Question

I am trying to implement File Upload in MVC. I have the following code which works.

@using (Html.BeginForm("ActioName", "ControllerName", FormMethod.Post, new { enctype = "multipart/form-data" }))
{         
       <div>
            <input type="file" name="file" />
            <input type="submit" value="OK" class="button" />
        </div>       
}

      [HttpPost]
      public ActionResult UploadFile(HttpPostedFileBase file)
       {
        // Verify that the user selected a file
        if (file != null && file.ContentLength > 0)
        {
        //do something here...
        }
      }

Now I want to add a dropdown box (to select the file type) and send that value along with the file to my Controller. How can I do that (send other form data along with the file)?

Answer 1

You should be able to add them to the view, include them in the POST and have MVC take care of the model binding:

@using (Html.BeginForm("ActioName", "ControllerName", FormMethod.Post, new { enctype = "multipart/form-data" }))
{         
       <div>
            <input type="file" name="file" />
            <select name="fileType">
               <option value="JPG">Photo</option>
               <option value="DOC">Word</option>
            </select>
            <input type="submit" value="OK" class="button" />
        </div>       
}

      [HttpPost]
      public ActionResult UploadFile(HttpPostedFileBase file, string fileType)
      {
        //Validate the fileType

        // Verify that the user selected a file
        if (file != null && file.ContentLength > 0)
        {
        //do something here...
        }
      }

Answer 2

I ended up doing it as follows it as follows. works good for me:

Created a Model:

public class FeeUpload
{
    [Required (ErrorMessage="File Type required")]       
    public string fileType { get; set; }

    [Required (ErrorMessage="file required")]
    public HttpPostedFileBase File { get; set; }

}

View:

@using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post, new { enctype = "multipart/form-data" }))
{ 
    @Html.ValidationSummary(false, "Please fix the following:")
    <div>
       <div>
            @Html.DropDownListFor(model => model.fileType,
                                   new List<SelectListItem>
                                         {
                                            new SelectListItem{ Text="xxx", Value = "yyy" }, 
                                            new SelectListItem{ Text="xxx", Value = "yyy" },
                                            new SelectListItem{ Text="xxx", Value = "yyy" }
                                         }, "Select")
            @*@Html.ValidationMessageFor(model => model.fileType)*@
        </div>

        <div>
            @Html.TextBoxFor(model => model.File, new { type = "file" })
            @*@Html.ValidationMessageFor(model => model.File)*@  
            <input type="submit" value="OK" class="button" id="btnsubmit" />
        </div>
    </div>
}

Controller:

    [AcceptVerbs(HttpVerbs.Post)]
    public ActionResult FeesAndCostsUpload(FeeUpload feeUploadFile)          
    {
        if (ModelState.IsValid)
        {
           //do something with feeUploadFile.File and feeUploadFile.fileType          
        }
        return View();
    }

Answer 3

Try to not use Razor for the form

<form method="POST" data-url="@Url.Action("Action", "Controller")" enctype="multipart/form-data">
        @Html.ValidationSummary(true)

        <span class="btn btn-success fileinput-button">
            <i class="fa fa-plus"></i>
            <span>Add a file...</span>
            @Html.TextBoxFor(model => model.Fichier, new { type = "file" })
        </span>

        <div class="form-group form-actions">
            <div class="col-sm-offset-3 col-sm-9">
                <input id="submit" type="submit" class="btn btn-primary" value='Value' />
            </div>
        </div>
    </form>

worked for me