Multiple File Upload Using MVC jQuery AJAX Post

In this blog, I am going to show how to upload multiple files using MVC jQuery Ajax Post in an application.

Step 1

Create a View with a file control to upload the file and a table to display the list of uploaded files. In this View, we have one textbox for username and a button to complete the upload process. 

<h3>Upload File(s)</h3>
<style>
    .red {
        color: red;
    }
</style>
<form id="uploader">
    <div class="row">
        <div class="col-sm-6">
            User Name : <input type="text" id="txtuploader" />
            <br />            <br />
            <input id="fileInput" type="file" multiple>
            <br />            <br />

            <table class="table" id="FilesList" style="visibility:hidden">
                <tr>
                    <th>
                        Attachment(s)
                    </th>
                    <th>
                        Action
                    </th>
                </tr>
            </table>
            <input type="button" id="btnupload" value="Upload" style="float:right" />

        </div>
    </div>
</form>

Step 2

The jQuery functions will perform the following functionalities:

• Move uploaded files into a list on file change event.
• chkatchtbl() helps to change the visibility of the files in the list based on the availability of the files.
• DeleteFile() will remove selected files in the list on the click of "Remove" button
• On click of the Upload button, it will call the controller using jQuery AJAX POST method.

<script>
        var formdata = new FormData(); //FormData object
        $(document).ready(function () {

            $("#fileInput").on("change", function () {
                var fileInput = document.getElementById('fileInput');
                //Iterating through each files selected in fileInput
                for (i = 0; i < fileInput.files.length; i++) {

                    var sfilename = fileInput.files[i].name;
                    let srandomid = Math.random().toString(36).substring(7);

                    formdata.append(sfilename, fileInput.files[i]);

                    var markup = "<tr id='" + srandomid + "'><td>" + sfilename + "</td><td><a href='#' onclick='DeleteFile(\"" + srandomid + "\",\"" + sfilename +
                        "\")'><span class='glyphicon glyphicon-remove red'></span></a></td></tr>"; // Binding the file name
                    $("#FilesList tbody").append(markup);

                }
                chkatchtbl();
                $('#fileInput').val('');
            });

            $("#btnupload").click(function () {
                formdata.append('uploadername', $('#txtuploader').val());
                $.ajax({
                    url: '/Home/UploadFiles',
                    type: "POST",
                    contentType: false, // Not to set any content header
                    processData: false, // Not to process data
                    data: formdata,
                    async: false,
                    success: function (result) {
                        if (result != "") {
                            alert(result);
                        }
                    },
                    error: function (err) {
                        alert(err.statusText);
                    }
                });
            });
        });
        function DeleteFile(Fileid, FileName) {
            formdata.delete(FileName)
            $("#" + Fileid).remove();
            chkatchtbl();
        }
        function chkatchtbl() {
            if ($('#FilesList tr').length > 1) {
                $("#FilesList").css("visibility", "visible");
            } else {
                $("#FilesList").css("visibility", "hidden");
            }
        }
    </script>

Step 3

Finally, in the Controller, it gets the all the uploaded files. When we enter the username, it stores the uploaded files into a temporary location.

public ActionResult UploadFiles()
{
    string uname = Request["uploadername"];
    HttpFileCollectionBase files = Request.Files;
    for (int i = 0; i < files.Count; i++)
    {
        HttpPostedFileBase file = files[i];
        string fname;
        // Checking for Internet Explorer
        if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
        {
            string[] testfiles = file.FileName.Split(new char[] { '\\' });
            fname = testfiles[testfiles.Length - 1];
        }
        else
        {
            fname = file.FileName;
        }
        // Get the complete folder path and store the file inside it.
        fname = Path.Combine(Server.MapPath("~/Uploads/"), fname);
        file.SaveAs(fname);
        }
        return Json("Hi, " + uname + ". Your files uploaded successfully", JsonRequestBehavior.AllowGet);
    }
}