Unable to upload multiple files

Question

I am using ASP.NET MVC 5,jquery latest version. I am trying to upload multiple files using jquery fileupload but I am unable to recieve multiple files.

View:

 <input id="fileupload" type="file" multiple="multiple" name="files[]"  >

<script type="text/javascript">
    $(document).ready(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            url: '/Media/UploadFiles',
            autoUpload: true,
            done: function (e, data) {

            }
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.progress .progress-bar').css('width', progress + '%');
        });
    });
</script>

Controller:

 [HttpPost]
        public ContentResult UploadFiles()
        {

            foreach (string file in Request.Files)
            { }
        }

Here in Request.Files I am recieving only one file.

Answer 1

Your uploaded files are actually sent one by one.

You can change your serve code

[HttpPost]
public JsonResult UploadFiles()
{
    IList<string> filesSaved = new List<string>();

    foreach (string file in Request.Files)
    {
    HttpPostedFileBase hpf = Request.Files[file];
    if (hpf.ContentLength > 0)
    {
        var fileName = hpf.FileName;
        filesSaved.Add(fileName);
    }
    }

    return Json(new {files = filesSaved}, JsonRequestBehavior.DenyGet);
}

and insert a breakpoint and you will see that the request goes through once for each file you're sending.

The problem is in your client code. There's an option in that plugin singleFileUploads which defaults to true, as you can read here.

You can change your client code setting singleFileUploads: false :

$(document).ready(function () {
        $('#fileupload').fileupload({
            dataType: 'json',
            url: '/Media/UploadFiles',
            autoUpload: true,
            singleFileUploads: false,
            done: function (e, data) {

            }
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.progress .progress-bar').css('width', progress + '%');
        });
});

and everything should work as expected.