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[]"/>

Change name from file[] to file perhaps? – Joe Phillips Apr 08 '14 at 15:49 — Joe Phillips, Apr 08 '14 at 15:49

score 7 · Answer 1 · answered Mar 24 '11 at 22:34

7

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

answered Mar 24 '11 at 22:34

Robert Green MBA

1,834
1
22
45

Mahesh · Answer 2 · 2011-03-04T04:18:31.387

3

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];

edited Mar 04 '11 at 04:18

answered Sep 20 '10 at 12:58

Mahesh

2,186
16
17

score 2 · Answer 3 · edited Sep 20 '13 at 16:04

2

In HTML5, you can upload multiple files with a single file upload field:

<input type="file" id="files" name="files" multiple />

In that case, your action method can be something like:

public ActionResult Index(List<HttpPostedFileBase> files) {

foreach (var file in files) {
  ...etc.

edited Sep 20 '13 at 16:04

Ray Nicholus

19,538
14
59
82

answered Sep 20 '13 at 15:09

John Deighan

4,329
4
18
19

score 2 · Answer 4 · answered Jan 02 '10 at 21:47

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;"/>

answered Jan 02 '10 at 21:47

Daniel A. White

187,200
47
362
445

2

List file = is always null – 1gn1ter Jan 03 '10 at 09: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

score 1 · Answer 5 · answered May 21 '13 at 01:27

You can look here a solution from Phil Haack.

On the view

<form action="" method="post" enctype="multipart/form-data">

  <label for="file1">Filename:</label>
  <input type="file" name="files" id="file1" />

  <label for="file2">Filename:</label>
  <input type="file" name="files" id="file2" />

  <input type="submit"  />
</form>

On Controller

[HttpPost]
public ActionResult Index(IEnumerable<HttpPostedFileBase> files) {
  foreach (var file in files) {
    if (file.ContentLength > 0) {
      var fileName = Path.GetFileName(file.FileName);
      var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
      file.SaveAs(path);
    }
  }
  return RedirectToAction("Index");
}

score 1 · Answer 6 · answered Jan 02 '10 at 21:46

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.

score 1 · Answer 7 · answered Jan 31 '10 at 13:39

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.

score 1 · Answer 8 · answered Nov 16 '16 at 13:29

Posting many file with jquery ajax and .net MVC:

In View:

        <input type="file" name="files" multiple class="hidden"    id="inputFiles">
       <button id="upload" class="btn btn-sm btn-primary" type="button">Încarcă</button>

In js:

    var btnUpload = $("#upload");
var inputFiles = $('#inputFiles');

    btnUpload.click(function () {
    inputFiles.trigger('click');
});

inputFiles.on('change', function () {
    var formData = new FormData();

    for (var i = 0; i < inputFiles[0].files.length; i++)
        formData.append("files[" + i + "]", inputFiles[0].files[i])

    $.ajax({
        url: window.baseUrl + "Archivator/Upload",
        type: "POST",
        contentType: "application/json, charset=utf-8",
        dataType: "json",
        data: formData,
        processData: false,
        contentType: false,
    });
});

Controller:

 [HttpPost]
    public ActionResult Upload(IEnumerable<HttpPostedFileBase> files)
    {

        return Content("Succesfully");
    }

score 0 · Answer 9 · edited Jan 26 '15 at 14:14

view

<input type="file" id="updFiles" multiple name="updFiles" />

Controller

if (Request.Files != null && Request.Files.Count > 0)  
{    
    for (int i = 0; i < Request.Files.Count; i++)  
    {  
        HttpPostedFileBase file = Request.Files[i];  
        if (file != null && file.ContentLength > 0)  
        {  
            var fileName = Path.GetFileName(file.FileName);  
            //store  
            var path = Path.Combine(Server.MapPath("~/App_Data/Uploads"), fileName);  
            file.SaveAs(path);  
        }  
    }  
}

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

9 Answers9