Multiple file upload with ASP.NET MVC & jQuery Multiple File Upload Plugin

Question

I'm using jQuery Multiple File Upload Plugin to upload several pictures. But form posts only 1, top, item. Fiddler (POST):

POST /Images/UploadImages HTTP/1.1
Host: localhost:4793
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.6) Gecko/20091201 Firefox/3.5.6
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://localhost:4793/images
Cookie: .ASPXAUTH=EFAC4E03FA49056788028048AE1B099D3EB6D1D61AFB8E830C117297471D5689EC52EF40C7FE2CEF98FF6B7C8CAD3AB741A5E78F447AB361A2BDD501331A88C7B75120611CEA4FECA40D972BB9401472
Content-Type: multipart/form-data; boundary=---------------------------1509898581730
Content-Length: 290022

-----------------------------1509898581730
Content-Disposition: form-data; name="album"

1
-----------------------------1509898581730
Content-Disposition: form-data; name="file[]"; filename="Blue hills.jpg"
Content-Type: image/jpeg

...

Here is my code:

<% using (Html.BeginForm("UploadImages", "Images", FormMethod.Post, new { enctype = "multipart/form-data"}))
       {%>

    <%= Html.DropDownList("album", (IEnumerable<SelectListItem>)ViewData["Albums"])%>
      <br />    
    <input type="file" name="file[]" id="file" class="multi" accept="jpg|png" />
      <br />
     <input type="submit" name="submit" value="Submit" />

    <% } %>

And controller's code:

public ActionResult UploadImages(FormCollection formValue)
    {           
        foreach (string file in Request.Files)
        {
            HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
            if (hpf.ContentLength == 0)
                continue;

            //do something with file
        }
        return RedirectToAction("Index");
    }

Please advise me how to solve the issue. Maybe you can advise other way to let user upload several images. TIA

PS. Besides html code of generated by the sript controls:

<input id="file" class="multi" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/>
<input id="file_F1" class="multi MultiFile" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/>
<input id="file_F2" class="multi MultiFile" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/>
<input id="file_F3" class="multi MultiFile" type="file" accept="jpg|png" name="file[]" style="position: absolute; top: -3000px;"/>
<input id="file_F4" class="multi MultiFile" type="file" accept="jpg|png" name="file[]"/>

Answer 1

I think the problem is the name file[] in the generated HTML. Clearly this si not working well from the plug-in side.

Sometimes reversing the right behavior is what works. Try to remove "[]" from the name and see.

Actually, since you are not using the input fields by name. You can leave the name unset similar to the homepage examples of the plug-in.

Give it a try.

Answer 2

You should be able to bind to a list.

public ActionResult UploadImages(List<HttpPostedFileBase> file)
{ 
// magic
}

and your view should have

<input id="file" class="multi" type="file" accept="jpg|png" name="file" style="position: absolute; top: -3000px;"/>

Answer 3

Check out this link : http://ramanisandeep.wordpress.com/2009/10/28/multiple-file-upload-using-jquery/

Hope this helps.

Answer 4

I've found. The 'namePattern' property should be defined in order to generate inputs with different name.

For ex.:

<input type="file" accept="gif|jpg|jpeg|png" />


<script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $i = (1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20);
            $(':file').MultiFile({ namePattern: '$name_$i', maxlength: 20 });
        });  
</script>

Nevertheless, thank you for your help.

Answer 5

Old Still Unanswered.

The problem was you are trying to access an array which contains same index as the POST submit is obtaining an array of files with same name.

Instead of

foreach (string file in Request.Files)
{
        HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;

use

for (int i = 0; i < Request.Files.Count; i++)
{
        HttpPostedFileBase hpf = Request.Files[i];