ASP.Net MVC Having trouble uploading files with MultiFile.js

Question

I am using the MultiFile.js library when I am uploading files to ASP.Net MVC. http://www.fyneworks.com/jquery/multifile/

The problem is when I add a java-script listener in between to catch the JSON return value the my function in ASP see the files as null. If I do not use the java-script everything works as expected. I am wondering what I need to do to change what I am doing in java-script such that ASP still receives the files I am trying to upload.

The line below shows null for param attachments:

public ActionResult AttachFiles(IEnumerable<HttpPostedFileBase> attachments)

Java Script

$("#attachBtn").on("click", function (e) {
    $(".has-success").removeClass("has-success");
    $(".has-danger").removeClass("has-danger");
    e.preventDefault();

    const frm = $("#attachFiles");
    $.post(frm.attr("action"), frm.serialize(), function (data) {
        if (data.success) {
            $("#alertMessage").addClass("alert-success");
            $("#alertMessage #alertMessageText").text(data.message);
        } else {
            $("#alertMessage").addClass("alert-danger");
            $("#alertMessage #alertMessageText").text(data.message);
        }
    });
});

$("#multiFileCustom").MultiFile({
    list: "#attachmentList"
});

ASP.Net MVC

[HttpPost]
public ActionResult AttachFiles(IEnumerable<HttpPostedFileBase> attachments)
{
    if (attachments == null || attachments.FirstOrDefault() == null)
    {
        return this.Json(new { success = false, message = "No files to attach" }, JsonRequestBehavior.AllowGet);
    }

    userAttachments = new List<string>();

    foreach (var file in attachments)
    {
        if (file.ContentLength == 0)
        {
            continue;
        }

        var fullPath = AppDomain.CurrentDomain.BaseDirectory + @"App_Data\uploads\" + Path.GetFileName(file.FileName);
        file.SaveAs(fullPath);
        userAttachments.Add(fullPath);
    }

    return this.Json(new { success = true, message = "Files Attached" }, JsonRequestBehavior.AllowGet);
}

HTML

@using (Html.BeginForm("AttachFiles", "Home", FormMethod.Post, new { @id = "attachFiles", enctype = "multipart/form-data" }))
{
    <div class="row">
        <div class="form-group">
            <label class="col-sm-1">Attach:</label>
            <div class="col-sm-11">
                <input type="file" id="multiFileCustom" name="attachments" />
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-offset-1" id="attachmentList"></div>
    </div>

    <div class="row">
        <div class="col-sm-2 col-lg-offset-1">
            <input type="submit" id="attachBtn" class="btn btn-default" value="Attach" />
        </div>
    </div>
}

You cannot use `$.post()` and `.serialize()` to upload files. You can use `FormData` with the correct ajax options (refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) - but what is the point of using the plugin if you then ignore it and write your own code to upload — , Nov 01 '16 at 21:26
The point is to return JSON back to Java-script so I can tell the user the status of the file upload. — Andrew, Nov 01 '16 at 21:28
I am open to another method of listening for the return. If it's possible. — Andrew, Nov 01 '16 at 21:34

score 0 · Accepted Answer · answered Nov 02 '16 at 04:47

The async file upload wont work with Controller .You can use Generic Handler for that purpose.

There is other way around to work with controller

1.First install

Install-Package BeginCollectionItem

2.Follow My code

Controller

 public class FileUploadViewModel
    {
        [Required]
       public HttpPostedFileBase File { get; set; }
        //Other Model Property
    }
    public class FileUploadMutipleController : Controller
    {
        //
        // GET: /FileUploadMutiple/

        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult AttachFiles(IEnumerable<FileUploadViewModel> attachments)
        {
            //Do other stuffs
            return View();
        }
        [HttpPost]//For generating multiple file attachment
        public ActionResult GetFile()
        {
            return PartialView("~/Views/FileUploadMutiple/_File.cshtml", new FileUploadViewModel());
        }
    }

_File.cshtml

@model MvcApplication1.Controllers.FileUploadViewModel

<tr>
    @using (Html.BeginCollectionItem("attachments"))//Name of ListName to bind
    {
        <td>
        @Html.TextBoxFor(m => m.File, new { type = "file" })
        @Html.ValidationMessageFor(m => m.File)
        </td>
        <td>
            <button type="button" id="removeProductRow" class="btn btn-primary" onclick="removeDetailRow(this)">
                Remove</button>
        </td>
    }
</tr>

and Index.cshtml

@{
    ViewBag.Title = "Index";
    //Layout = null;
}
<script src="@Url.Content("~/Scripts/jquery-2.1.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#add-file').click(function () {
           // alert('Hi');
            $.ajax({
                url: '@Url.Action("GetFile")',
                type: 'POST',
                success: function (data) {
                    console.log(data);
                    $('#tbl > tbody:last').append(data);
                    //$('.new-recipeingredients').append(data);
                }
            });
            return false;
        });

    });
    function removeDetailRow(element) {
        var detailRow = $(element).closest('tr');
        $(detailRow).remove();
    }
</script>
<h2>Index</h2>
@using (Html.BeginForm("AttachFiles", "FileUploadMutiple", FormMethod.Post, new { @id = "attachFiles", enctype = "multipart/form-data" }))
{
     @Html.ValidationSummary(true)
     <a id="add-file" class="btn btn-success" href="javascript:void(0);">Add another</a>
    <table id="tbl">
        <thead>
        <tr>
            <th>
                File
            </th>
            <th>
                Upload
            </th>

        </tr>
        </thead>
        <tbody>


        </tbody>


    </table>
    <input type="submit" id="attachBtn" class="btn btn-default" value="Attach" />
}

ASP.Net MVC Having trouble uploading files with MultiFile.js

Java Script

ASP.Net MVC

HTML

1 Answers1