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

Reverberate

Change name from file[] to file perhaps? – Barnabas

Answer 1

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

Bertelli

Answer 2

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

Costly

Answer 3

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

Reavis

List<HttpPostedFileBase> file = is always null – Reverberate

How it can be possible only with changing single file uploading tag by this attribute "class='multi'"?! – Cambell

Answer 4

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.

Vo

Answer 5

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.

Mordecai

Answer 6

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.

Reverberate

Answer 7

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

Alcus

Answer 8

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

Fairground

Answer 9

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

Jot