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!

Drumstick

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.

Muldoon

Hey Darin, sorry for the late response.This is what I needed, the multiupload with one request(seems i missed this part of the documentation). Thanks! – Drumstick

That part of the documentation doesn't say how the server-side looks of multiple files in one request. Will HttpPostedFileBase just become IEnumerable<HttpPostedFileBase>? – Loppy

a fuller explanation of the setup and json return type can be found here - github.com/blueimp/jQuery-File-Upload/wiki/Setup-v4 – Guinea

Answer 2

To get the files you could use,

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

Damron

this cause Exception in Chrome when they send through MIME type octet instead of image/jpeg. be serious ! – Cushion

Answer 3

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"
                                    }
                              }
            }
        );

Himyarite