Why is MVC HttpPostedFileBase always null?

Question

This is my View

Test Upload File

<form action="@Url.Action("Index", "Home")" method="post" enctype="multipart/form-data">
    @Html.AntiForgeryToken()
    <label for="file">Filename:</label>
    <input type="file" name="files" id="files" />

    <input type="submit" name="submit" value="Upload" />
</form>

This is my Controller

 [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Index(IEnumerable<HttpPostedFileBase> files)
          { 
              if (files != null)
                {
                 foreach (var file in files)
                   {
                    try
                     {
                      if (file != null && file.ContentLength > 0)
                        {
                          var fileName = file.FileName;
                          var path = Path.Combine(Server.MapPath(@"\Upload"), fileName);
                          file.SaveAs(path);

                          ViewBag.Message = "File uploaded successfully";
                         }
                       }
                      catch (Exception ex)
                      {
                        ViewBag.Message = "ERROR:" + ex.Message.ToString();
                       }
                   }
                 }
               return View();
             }

The problem is the HttpPostedFileBase files is always null. I cant find the problem.

Answer 1

Here is an example how to use form onsubmit method

Your HTML part

<form id="formTest" method="post" enctype="multipart/form-data">

        <label for="file">Filename:</label>
        <input type="file" name="files" id="files" />

        <input type="submit" name="submit" value="Upload" />
    </form>

script

<script type="text/javascript">
var form = document.getElementById('formTest').onsubmit = function (e) {
        e.preventDefault();
    var formdata = new FormData(); //FormData object
    var fileInput = document.getElementById('files');
    if (fileInput != "" && fileInput.files.length > 0) {
        //Iterating through each files selected in fileInput
        for (i = 0; i < fileInput.files.length; i++) {
            //Appending each file to FormData object
            formdata.append(fileInput.files[i].name, fileInput.files[i]);
        }
        //Creating an XMLHttpRequest and sending
        var xhr = new XMLHttpRequest();

           var url = '@Url.Action("Index","Home")';
        xhr.open('POST', url);
        xhr.send(formdata);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = xhr.responseText;

            }
        }
        return false;
    }
}
</script>

C#

public ActionResult Index()
{ 
   if (Request.Files.Count > 0)
   {
      var file = Request.Files[0];    
      if (file != null && file.ContentLength > 0)
      {
         var fileName = Path.GetFileName(file.FileName);
         var path = Path.Combine(Server.MapPath("~/Images/"), fileName);
         file.SaveAs(path);
      }
    return View();

   }
}