Multiple File Upload in Web API

Introduction

This article explains how to upload multiple files in the Web API. Here we use a HTML5 attribute multiple="multiple" for uploading more than one file.

Procedure for creating the application:

Step 1

First we create a Web API application as in the following:

  • Start Visual Studio 2013.
  • From the start window select "New Project".
  • From the new project window select "Installed" -> "Visual C#" -> "Web" -> "Visual Studio 2012".
  • Select "ASP.NET MVC 4 Web Application" and click the "OK" button.

    m.jpg
  • From the "MVC4 project" window select "Web API".

    m1.jpg
  • Click on the "OK" button.

Step 2

Now in the "HomeController" add the following code. This file exists:

  • In the "Solution Explorer".
  • Expand the "Controller" folder.
  • Select the "HomeController".

    m2.jpg

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. namespace MultiFileUpload.Controllers  
  7. {  
  8.     public class HomeController : Controller  
  9.     {  
  10.         public ActionResult Index()  
  11.         {  
  12.             return View();  
  13.         }  
  14.         [HttpPost]  
  15.         public ActionResult Index(HttpPostedFileBase[] images)  
  16.         {  
  17.             try  
  18.             {  
  19.                 foreach (HttpPostedFileBase image in images)  
  20.                 {  
  21.                     string imagename = System.IO.Path.GetFileName(image.FileName);    
  22.                     image.SaveAs(Server.MapPath("~/Images/" + imagename));  
  23.                     string filepathtosave = "Images" + imagename;  
  24.                 }  
  25.                 ViewBag.Message = "Selected Files are Upload successfully.";  
  26.             }  
  27.             catch  
  28.             {  
  29.                 ViewBag.Message = "Error: Error occure for uploading a file.";  
  30.             }  
  31.             return View();  
  32.         }  
  33.     }  
  34. }      

Step 3

In the View provide the following code: 

  • In the "Solution Explorer".

  • Expand the "Views folder".

  • Select "Home" -> "Index.cshtml".

    m3.jpg

Add the following code:

  1. @{  
  2.     ViewBag.Title = "Index";  
  3. }  
  4. @using (Html.BeginForm("Index""Home", FormMethod.Post, new { enctype = "multipart/form-data" }))  
  5. {  
  6.     <h3>Upload Multiple files </h3>  
  7.     <input type="file" name="images" value="" multiple="multiple" />  
  8.     <input type="submit" value="UploadImage" title="Upload" />  
  9.     <div style="color:Red;font-size:14px">@ViewBag.Message</div>  
  10. } 

Here we use the multiple="multiple" attribute that allows for uploading multiple files.

Step 4

Execute the application:

m4.jpg

Browse and select multiple files. Here we select 3 image files.

m5.jpg

Click on the "Upload" button.

m6.jpg