Uploading multiple files with ASP.NET MVC

4.54 (26 votes)

I have looked at uploading individual files and downloading multiple files in MVC, and I've had a few requests recently asking me to complete the series by showing how to upload multiple files in an ASP.NET MVC application.

When designing the form for uploading, you can choose from a number of approaches. You can use plain HTML elements. If you know that your users are using browsers that implement the HTML5 file API, you can provide a single file input with the multiple attribute:

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

This enables multiple file selection, but is not available in Internet Explorer 9 or below. It is available in most other modern browsers. One alternative is to provide a number of inputs for users of IE9 or lower. You can selectively choose to display the single input with the multiple attribute set or multiple individual inputs based on the features supported by the browser. Here's the HTML part, including the form declaration which requires the method to be set to POST and an enctype set to multipart/form-data for file uploading to work:

@using (Html.BeginForm("Multiple", "Home", FormMethod.Post, new { enctype = "multipart/form-data" })) { 
    <div id="multiple">
        <input type="file" class="multiple" name="files" multiple />
    </div>
    <div id="single">
        <input type="file" class="single" name="files" /><br />
        <input type="file" class="single" name="files" /><br />
        <input type="file" class="single" name="files" /><br />
    </div>
    <button class="btn btn-default">Upload</button>   
}

And here's the jquery code that switches between the two options:

@section Scripts{
    <script type="text/javascript">
        $(function () {
            if(window.FileReader != null){
                $('#single').hide();
                $('.single').prop('disabled', true);
            } else {
                $('#multiple').hide();
                $('.multiple').prop('disabled', true);
            }
        });
    </script>
}

Browsers that implement the HTML5 file API include a component called Filereader. If this is null, the browser doesn't provide the required support and the input with the multiple attribute is disabled and hidden.

Files are uploaded to the server in the Request.Files collection, each one of which is mapped to an HttpPostedFileBase object by the default MVC model binder. Therefore, the controller action that is tasked to process the uploaded files needs a parameter that represents a collection of HttpPostedFileBase objects. This can be a property on a model, or a simple List<HttpPosteFileBase>parameter. The following action takes each file and saves it with a new name generated from a Guid to a folder called "uploads":

[HttpPost]
public ActionResult Multiple(IEnumerable<HttpPostedFileBase> files)
{
    foreach (var file in files)
    {
        if (file != null && file.ContentLength > 0)
        {
            file.SaveAs(Path.Combine(Server.MapPath("/uploads"), Guid.NewGuid() + Path.GetExtension(file.FileName)));
        }
    }
    return View();
}

An HttpPostedFileBase collection is created and sized to the number of uploads on a form regardless whether the user populated it, or the number of files uploaded if the multiple attribute approach is used. So when testing to see if a file has been uploaded, you should check to see if it is null before testing to see if the ContentLength is greater than 0. If you prefer to save the files in a database, either as binary data or pointers to files in the file system you can read how to do that from my previous article on file uploading: ASP.NET MVC 5 with EF 6 - Working With Files.

Summary

This brief article shows how to upload multiple files in an ASP.NET MVC application by using only HTML solutions (no Flash). It describes the multiple attribute available as part of HTML5 and shows how to fallback to an alternative solution in the cases where the browser lacks the required support.

You might also like...

Date Posted:
Last Updated:
Posted by:
Total Views to date: 53934

1 Comment

- Manoj Kulkarni

Nice article. Thank you for sharing.

Recent Comments

ojorma 17/06/2017 09:24
In response to Razor Pages - The Elevator Pitch
Finally I can say goodbye to webforms...

Mau 06/06/2017 08:58
In response to Razor Pages - The Elevator Pitch
I am missing the razor view code. Thank you for your article. Design pattern should improve the of...

Obinna Okafor 26/05/2017 16:16
In response to Razor Pages - The Elevator Pitch
Thank you for this wonderful piece, Mike. I need more of these...Keep them coming - anything more...

Cyrus 26/05/2017 06:00
In response to Razor Pages - The Elevator Pitch
There are some concern about razor pages performance. Is it faster or slower than MVC? would you a a...

Cyrus 26/05/2017 05:44
In response to Razor Pages - Understanding Handler Methods
well done, thank you....

Satyabrata Mohapatra 23/05/2017 11:41
In response to Razor Pages - Understanding Handler Methods
Nice and easy !! Great post....

Cyrus 16/05/2017 19:55
In response to Razor Pages - Getting Started With The Preview
There is something wrong related to microsoft.dotnetcore.mvc.taghelpers! if you remove it from page...

Cyrus 16/05/2017 10:18
In response to Razor Pages - Getting Started With The Preview
well done mike, it was very useful, I really appreciate that....

Satyabrata Mohapatra 16/05/2017 07:21
In response to Razor Pages - Getting Started With The Preview
Finally!!!! web pages in asp.net core!!! Super excited !!!! Thank u sir for sharing.....Awaiting on...

Daniele 14/03/2017 10:24
In response to Working With Zip Files In ASP.NET MVC
is it possible give to the user a progress bar of the zipping process? Thanks in advance. ...