Blueimp multi file uploader with ASP.NET MVC 3

Question

I am trying to add blueimp File Upload to a MVC application and I'm having problems with receiving the files in the post action(im going for the multi file upload functionality).Can someone please help me figure this out?

In my view i have the following code:

<form id="file_upload" enctype="multipart/form-data" action="Home/SaveFile" method="post">    
   <input type="file" name="file" multiple="true"/>
   <button>Upload</button>
   <div>Upload files</div>        
</form>
<br />
###############################
<table id="files">
</table>

<button id="start_uploads">Start uploads</button>
<button id="cancel_uploads">Cancel uploads</button>

The JQuery code for blueimp File Upload is the following:

$(document).ready(function () {

        $('#file_upload').fileUploadUI({
            uploadTable: $('#files'),
            downloadTable: $('#files'),
            buildUploadRow: function (files, index) {
                return $('<tr><td class="file_upload_preview"><\/td>' +
                        '<td>' + files[index].name + '<\/td>' +
                        '<td class="file_upload_progress"><div><\/div><\/td>' +
                        '<td class="file_upload_start">' +
                        '<button class="ui-state-default ui-corner-all" title="Start Upload">' +
                        '<span class="ui-icon ui-icon-circle-arrow-e">Start Upload<\/span>' +
                        '<\/button><\/td>' +
                        '<td class="file_upload_cancel">' +
                        '<button class="ui-state-default ui-corner-all" title="Cancel">' +
                        '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
                        '<\/button><\/td><\/tr>');
            },
            buildDownloadRow: function (file) {
                return $('<tr><td>' + file.name + '<\/td><\/tr>');
            },
            beforeSend: function (event, files, index, xhr, handler, callBack) {
                handler.uploadRow.find('.file_upload_start button').click(callBack);
            }
        });
        $('#start_uploads').click(function () {
            $('.file_upload_start button').click();
        });
        $('#cancel_uploads').click(function () {
            $('.file_upload_cancel button').click();
        });
    });

And inside the controller the following action method:

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult SaveFile(IEnumerable<HttpPostedFileBase> files)
    {
        foreach (HttpPostedFileBase file in files)
        {
            //some file upload magic                
        }
        return View("MyView");
    }

I am using MVC 3.

In the action method, if the argument is of type IEnumerable it receives null and if the argument is of type HttpPostedFileBase it receives the files in a strange way and the action method doesn't work how it's suppose to.

Any kind of help is much appreciated, thanks.

Cheers!

Answer 1

The SaveFile controller action will be called for each file. So it should look like this:

[HttpPost]
public ActionResult SaveFile(HttpPostedFileBase file)
{
    //some file upload magic

    // return JSON
    return Json(new
    {
        name = "picture.jpg",
        type = "image/jpeg",
        size = 123456789
    });
}

And if you want to handle multiple upload files in the same request you may take a look at the respective section of the documentation.

Answer 2

I know that this is an old issue, but just to point in here. In addition to Darin Dimitrov post - returned json should be in format compatible with jQuery File Upload - which expects array even if one file is transmitted. For example:

        return Json(
            new
            {
                files = new[]{
                                new { 
                                        name = "www.png",
                                        size = "1234567"
                                    }
                              }
            }
        );

Answer 3

To get the files you could use,

foreach (string inputTagName in Request.Files)
{                
    HttpPostedFileBase file = Request.Files[inputTagName];
}