Asp.net MVC: upload multiple image files?

Question

is there a good example of how to upload multiple image files in asp.net mvc? I know we can use HttpPostedFileBase to upload one file. Is there a way to upload multiple files by clicking one button?

I used file upload in ajaxtoolbox in webform before and like how it works. Is there a similar way in MVC? or, is there a existing control that can do this well? free control is better, but it is ok even it costs some $.

Thanks

Oarlock

we used plupload.com at my last job for multiple uploads – Antietam

is there a simple example of how to use it in asp.net MVC? thanks. – Oarlock

I don't have access to that code base anymore. Here is an example I found googling pluploadmvc4demo.codeplex.com – Antietam

Answer 1

Use this jQuery plugin

just include plugin js files, create tag:

<input type='file' multiple id='fileUpload' name="files[]" data-url="@Url.Action("Upload","Home")" />

(Except IE9 it is not allowing select multiple files in select dialog)

Add some JavaScript:

$(function () {
    $('#fileUpload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

In controller action just check Request.Files and do whatever you want. Here is a good documentation

[HttpPost]
public JsonResult Upload() 
{
    foreach (var file in Request.Files)
    {
        if(file.ContentLength > 0)
        {
            file.SaveAs(Server.MapPath("~/Upload/" + file.FileName));
        }
    }

    return Json(new { result = true });
}

Ensepulcher

using this plugin, a basic example can be found here : github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin – Infusible

Answer 2

You could implement an action with POST http verb to that receive a collection of HttpPostedFileBase and save all files, for sample:

[HttpPost]
public ActionResult Upload(IEnumerable<HttpPostedFileBase> files) 
{
    foreach (var file in files)
    {
        file.SaveAs(Server.MapPath("~/Update/" + file.FileName));
    }

    return View();
}

Alternatively, you could read Request.Files and do the same job,

[HttpPost]
public ActionResult Upload() 
{
    foreach (var file in Request.Files)
    {
        file.SaveAs(Server.MapPath("~/Update/" + file.FileName));
    }

    return View();
}

See Also

• Single File Upload to Multiple File Upload in MVC
• Uploading a File (Or Files) With ASP.NET MVC

Maureen

Thanks a lot for the links, it really helped me – Retribution

I tried to upload 396 csv files and it's working fine but when I tried to upload 484 files it's not working anymore what I am missing? I already edited the web.config based on this site – Hills

Answer 3

I'm using this one. https://www.fyneworks.com/jquery/multiple-file-upload/

<input type="file" name="file" class="multiple" /> 

[HttpPost] 
public ActionResult Upload()  
{
    if (Request.Files.Count > 0)
    {
          foreach(var file in Request.Files) {  }
    }

    return View(); 
}

Repulsive

Answer 4

Some of the basic bits required for file uploads

Notice keyword: multiple in input element AND multipart in form element

HTML Side

@using (Html.BeginForm("MyUpload", "MyController", FormMethod.Post, new { enctype = "multipart/form-data" })) { 
    <input type="file" name="myFiles" multiple />
    <button class="btn btn-default">Upload</button>   
}

---

Controller

[HttpPost]
public ActionResult MyUpload(IEnumerable<HttpPostedFileBase> myFiles)
{
    foreach (var file in myFiles)
    {
        if (file != null && file.ContentLength > 0)
        {
            //handle files;
        }
    }
    return View();
}

Bartle