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!

score 8 · Accepted Answer · answered Feb 21 '11 at 09:24

8

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.

answered Feb 21 '11 at 09:24

Darin Dimitrov

1,023,142
271
3,287
2,928

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! – TestSubject09 Feb 23 '11 at 13:05
That part of the documentation doesn't say how the server-side looks of multiple files in one request. Will `HttpPostedFileBase` just become `IEnumerable`? – Matthijs Wessels Mar 23 '11 at 12:22
a fuller explanation of the setup and json return type can be found here - https://github.com/blueimp/jQuery-File-Upload/wiki/Setup-v4 – Baldy Jul 22 '11 at 14:11

sephirot · Answer 2 · 2014-05-21T15:21:51.023

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

score 1 · Answer 3 · answered Mar 22 '11 at 10:04

1

To get the files you could use,

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

answered Mar 22 '11 at 10:04

Vinz

11
1

this cause Exception in Chrome when they send through MIME type octet instead of image/jpeg. be serious ! – May 17 '11 at 09:15

Blueimp multi file uploader with ASP.NET MVC 3

3 Answers3