Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite
2

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[]"/>
share|improve this question
3  
If this problem is solved, please mark the correct answer – Mohamed Meligy Dec 29 '10 at 22:47

5 Answers

up vote 1 down vote

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;"/>
share|improve this answer
List<HttpPostedFileBase> file = is always null – 1gn1ter Jan 3 '10 at 9:09
How it can be possible only with changing single file uploading tag by this attribute "class='multi'"?! – ghedas Sep 17 '11 at 10:08
+1 "// magic" i see what you did there.. – Berker Yüceer Mar 6 at 9:55
up vote 1 down vote

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.

share|improve this answer
up vote 1 down vote

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];
share|improve this answer
up vote 1 down vote

I found a solution. The answer was to change the HttpPostedFileBase to an IEnumerable (if you are uploading multiple files).

I had the same problem(s) as you above. This solved my problem. Here is a good link too:Phil Haacks's post

share|improve this answer
up vote 0 down vote

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.

share|improve this answer
1  
How did it go? Did it work? – Mohamed Meligy Jan 6 '10 at 6:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.