How to upload files with additional data in ASP.NET MVC

Question

How can i upload a file with additional data in ASP.NET MVC? This is what I have so far:

 @using (Html.BeginForm("CreateSiteLogo", "SiteSettings", FormMethod.Post))
 {
     @Html.TextBoxFor(a=>a.SiteNameKey)

     <input type="file" name="logo" id="logo" />
     <input type="submit" />
 }

Action:

[HttpPost]
public ActionResult CreateSiteLogo(SiteSettingsAPIModel siteSetting)
{
    // Handle model
}

Model:

public class SiteSettingsAPIModel
{
    public int Id { get; set; }
    public string SiteNameKey { get; set; }
    public byte[] SiteLogo { get; set; }
    public string ImageFormat { get; set; }
}

I can only get the value of the input[text] but not the input[file]. I tried using Request.Files[0] but I'm always getting null.

Have you put a break point on your `ActionResult` to see if the file is coming through? — Izzy, Dec 07 '16 at 09:23
A better approach would be to add an onchange listener to the file input, post the file through ajax and return the filename as what it has been saved. Then you could add the filename to the model — Gecko, Dec 07 '16 at 09:23
Specify `enctype` in your form like this: `Html.BeginForm("CreateSiteLogo", "SiteSettings", FormMethod.Post, new { enctype = "multipart/form-data" }`. Then you'll be able to access `Request.Files[0]` — Andre Borges, Dec 07 '16 at 09:27
See this [answer](http://stackoverflow.com/questions/20446580/upload-image-included-in-mvc-model?noredirect=1&lq=1) — Jasen, Dec 07 '16 at 09:27
Please take a look at the following similar question: http://stackoverflow.com/questions/35379309/asp-net-mvc-6-file-uploads — bartbje, Dec 07 '16 at 09:41

vrharilal · Answer 1 · 2016-12-07T10:38:38.507

If you are using file upload in View then you must specify the enctype = "multipart/form-data" in BeginForm

    @using (Html.BeginForm("CreateSiteLogo", "SiteSettings", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.TextBoxFor(a => a.SiteNameKey)

    <input type="file" name="logo" id="logo" />
        <input type="submit" />
}

and in the Controller side,

public ActionResult CreateSiteLogo(SiteSettingsAPIModel siteSetting, HttpPostedFileBase logo)
    {
        //Getting the file path
        string path = Server.MapPath(logo.FileName);

        //getting the file name
        string filename = System.IO.Path.GetFileName(logo.FileName);
        using (var binaryReader = new BinaryReader(logo.InputStream))
        {
            fileContent = binaryReader.ReadBytes(logo.ContentLength);
        }
        siteSetting.SiteLogo = fileContent;

        return View();
    }

the controller code shall be modified according to your requirement. Hope its helpful

Thanks a lot :) However it turns out i need to change the type of the logo from byte array to http posted file base. That way i won't have to add a second parameter to my action. Again thanks :D — user3159792, Dec 07 '16 at 09:54

score 1 · Accepted Answer · answered Dec 07 '16 at 09:41

This could help:

@model SandBox.Web.Models.SiteSettingsAPIModel
@using (Html.BeginForm("CreateSiteLogo", "SiteSettings", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.TextBoxFor(a => a.SiteNameKey)

    <input type="file" name="SiteLogo" id="logo" />
    <input type="submit" />
}

public class SiteSettingsAPIModel
{
    public int Id { get; set; }
    public string SiteNameKey { get; set; }
    public HttpPostedFileBase SiteLogo { get; set; }
    public string ImageFormat { get; set; }
}

How to upload files with additional data in ASP.NET MVC

2 Answers2