User Id :    Password :      New Member   Forgot Password  
Multiple file upload with mvc and HTML5
Description Multiple file upload with mvc and HTML5   No. of Views     2176
  Rating     0
Author Jalpesh Vadgama   Posted On     15 Aug 2012

Sample Code   Download Code

Few days I have written a blog post about Multiple file upload with 4.5 and Visual studio 2012. It was greatly appreciated by the community and also been part of community daily spot light.  On that post one of my reader Ciwan Kurd has requested the mvc version of that post. So in this post I will explain how we can do multiple file upload with HTML5.

For this post I am going to use mvc 3 with HTML5 template and visual studio 2012 but you can use same techniques in any version of mvc.  First things we needs to do create a HTML form for the uploading file in mvc view so following is a code for that.


@using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    <label for="file">Upload Image:</label>
    <input type="file" name="files" value="" multiple="multiple"/>
    <input type="submit" value="Upload Image" />



In above code that I have use @HTML.BeginForm to create a HTML form with multipart as this attribute is required to upload any kind of files on the server. I have mapped that form to upload action result. Also I have used the file input control with HTML5 multiple attribute which allow us to upload multiple files on the server. Now its time to write code in mvc controller. Following is a code for that.


public ActionResult Upload(HttpPostedFileBase[] files)
    foreach (HttpPostedFileBase file in files)
        string path = System.IO.Path.Combine(Server.MapPath("~/App_Data"), System.IO.Path.GetFileName(file.FileName));
    ViewBag.Message = "File(s) uploaded successfully";
    return RedirectToAction("Index");



So, Here you can see we will get the files as HttpPostedFileBase array so I have written a foreach loop to upload the file. On the successful upload it will get back to home page. So let’s run that in browser.



Now once you click on choose files at that time it will allow you select multiple files like following.



Now once you select files and click upload files. It will upload files in app_data folder.That’s it. Hope you like it. Stay tuned for more. Till than happy programming.

About Author

About Author I am jalpesh vadgama an Microsoft MVP for Visual C# and BrainBench Certified ASP.NET Developer having more then 5 years of experience in .NET Technology.Please feel free to contact me for any queries via posting comments on my blog I will try to reply as early as possible. Please also visit my blog at Jalpesh Vadgama
No Photo
Country India
Company N/A
Home Page

Rate this article

Rating options from poor, fair, good, very good to excelent.  


Write your comment here.
Verification Code