使用弹出表单上传文件，MVC 和 AJAX 始终为“NULL”

Question

I'm using the code from this tutorial to upload rows to a SQL Server table and one of the new requirements it's getting files stored into the server for "Evidence" purposes, so in the form I have the following code:

@using (Html.BeginForm("AnadirLic", "Licencia", FormMethod.Post, new { enctype = "multipart/form-data", onsubmit = "return SubmitForm(this)" }))
{
    @Html.HiddenFor(model => model.idLicencia)
<div class="form-group">
                    <label>Tipo de especialista: </label>

                    @Html.DropDownList("tipoEspecialista", new List<SelectListItem>{
                    new SelectListItem{ Value="1", Text = "Medico"},
                    new SelectListItem{ Value="2", Text = "Dentista"},
                    new SelectListItem{ Value="3", Text = "Matrona"},})

                    <small class="form-text text-muted">Ejercicio</small>
                </div>
                <div class="form-group">
                    <label>Cargar Evidencia</label>
                    @*@Html.TextBoxFor(model => model.rutaEvidencia, new { @class = "form-control", @type = "file" })*@
                    @*@Html.TextBoxFor(model => model.rutaEvidencia, new { @class = "form-control", @type = "file", enctype = "multipart/form-data" })*@
                    <input type="file" id="FileUpload" />
                    <small class="form-text text-muted">Máximo 4MB, .pdf, .jpg, .png</small>
                </div>

                <div class="input-group">
                    <input type="submit" value="Subir" class="btn btn-primary" style="margin-right:10px"/>
                    <input type="reset" value="Limpiar campos" class="btn btn-primary" />
                </div>

And the AJAX function looks like this:

 <script> function PopupForm(url) { var formDiv = $('<div/>'); $.get(url) .done(function (response) { formDiv.html(response); Popup = formDiv.dialog({ autoOpen: true, resizable: true, title: 'Llenar nuevo reposo', height: 500, width: 1300, close: function () { Popup.dialog('destroy').remove(); } }) } ) } function SubmitForm(form) { $.validator.unobtrusive.parse(form); // FILE VALIDATOR / COUNT var totalFiles = document.getElementById("FileUpload").files.length; for (var i = 0; i < totalFiles; i++) { var archivo = document.getElementById("FileUpload").files[i]; form.append("FileUpload", archivo); } //IF VALID UPLOAD TO SQL if ($(form).valid()) { $.ajax({ type: "POST", url: form.action, data: $(form).serialize(), success: function (data) { if (data.success) { Popup.dialog('close'); $('#tablaLicencia').DataTable().ajax.reload() $.notify(data.message, { globalPosition: "top center", className: "success" }) } } }); } return false; } </script>

Finally the C#:

[HttpPost]
public ActionResult AnadirLic(licenciasUsuario lic)
{
    using (TH_mantenedorLicenciasEntities db = new TH_mantenedorLicenciasEntities())
    {
        var fechaYMD = DateTime.Now.ToString("yyyyMMdd");
        var fechaHM = DateTime.Now.ToString("hhmm");
        var InputFileName = "";
        var ServerSavePath = "";

        for (int i = 0; i < Request.Files.Count; i++)
        {
            var archivo = Request.Files[i];

            InputFileName = Path.GetFileName(archivo.FileName);
            ServerSavePath = Path.Combine(Server.MapPath("~/evCargadas") + fechaYMD + "_" + fechaHM + "_" + InputFileName);
            //Save file to server folder  
            archivo.SaveAs(ServerSavePath);
        }

        ViewBag.Message = "Archivo subido correctamente.";

        db.licenciasUsuario.Add(lic);

        db.SaveChanges();

        //UPDATE CON RUTA DE ARCHIVO
        lic.rutaEvidencia = ServerSavePath;

        db.Entry(lic).State = System.Data.Entity.EntityState.Modified;

        db.SaveChanges();

        return Json(new { success = true, message = "Licencia guardada exitosamente." }, JsonRequestBehavior.AllowGet);
    }
}

What I've faced is that the FileUpload is always null and using HttpPostFileBase returns the same, therefore the method throws a null exception to the Entity and based on some answers on SO, MVC conflicts with these kind of ajax apps.

System.Data.Entity.Validation.DbEntityValidationException: 'Validation failed for one or more entities. See 'EntityValidationErrors' property for more details.'

Is it possible to emulate a function that allows/force a file upload into a project folder using the same popup thing?

Answer 1

<input type="file" id="FileUpload" /> lets you to select single file. In submit function you are accessing files property which is available only for multiple files selection.

So, either add multiple to your input tag <input type="file" id="FileUpload" multiple />

or modify submit function to use "value" property instead of files property.

function SubmitForm(form) {
    $.validator.unobtrusive.parse(form);
// FILE VALIDATOR / COUNT
    /*var totalFiles = document.getElementById("FileUpload").files.length;
    for (var i = 0; i < totalFiles; i++) {
        var archivo = document.getElementById("FileUpload").files[i];
        form.append("FileUpload", archivo);
    }*/
    var archivo = document.getElementById("FileUpload").Value;
    form.append("FileUpload", archivo);
//IF VALID UPLOAD TO SQL
    if ($(form).valid()) {
        $.ajax({
            type: "POST",
            url: form.action,
            data: $(form).serialize(),
            success: function (data) {
                if (data.success) {
                    Popup.dialog('close');

                    $('#tablaLicencia').DataTable().ajax.reload()

                    $.notify(data.message, {
                        globalPosition: "top center",
                        className: "success"
                    })

                }
            }
        });
    }
    return false;
}