Multiple file upload using ASP.NET MVC and jQuery for multiple file uploads

Question

I am using jQuery Multiple File Upload Plugin to upload multiple images. But it forms messages only 1, top, element. Violinist (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 the controller 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 tell me how to solve the problem. Perhaps you can advise in another way to allow the user to upload multiple images. TIA

PS. In addition to the html code 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 have found a solution. The answer was to change the HttpPostedFileBase to 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: Phil Haax posted

Answer 2

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

Instead

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

using

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

Answer 3

You should be able to become attached to the list.

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

and your idea should have

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

Answer 4

In HTML5, you can upload multiple files with one uploadable file:

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

In this case, your action method might look something like this:

 public ActionResult Index(List<HttpPostedFileBase> files) { foreach (var file in files) { ...etc. 

Answer 5

I think the problem is the file name [] in the generated HTML. Obviously, this does not work very well with the plug-in.

The correct behavior sometimes changes. Try to remove "[]" from the name and see.

Actually, since you are not using input fields by name. You can leave the unset name similar to the original plugin examples.

Give it a try.

Answer 6

I found. The namePattern property must be defined in order to generate inputs with a different name.

For example:

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

However, thanks for your help.

Answer 7

You can see the solution from Phil Haack here.

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

Answer 8

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

Answer 9

Posting a large number of files using 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"); }