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.

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

• 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".

Add the following code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace MultiFileUpload.Controllers

{

    public class HomeController : Controller

    {
             public ActionResult Index()

        {

            return View();

        }

        [HttpPost]

        public ActionResult Index(HttpPostedFileBase[] images)

        {
            try

            {
                foreach (HttpPostedFileBase image in images)

                {                    

                    string imagename = System.IO.Path.GetFileName(image.FileName);  

                    image.SaveAs(Server.MapPath("~/Images/" + imagename));

                    string filepathtosave = "Images" + imagename;

                }

                ViewBag.Message = "Selected Files are Upload successfully.";

            }

            catch

            {

                ViewBag.Message = "Error: Error occure for uploading a file.";

            }

            return View();

        }

    }

}

      

Step 3

In the View provide the following code: 

• In the "Solution Explorer".

• Expand the "Views folder".

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

Add the following code:

@{

    ViewBag.Title = "Index";

}

 

@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))

{

    <h3>Upload Multiple files </h3>

    <input type="file" name="images" value="" multiple="multiple" />

    <input type="submit" value="UploadImage" title="Upload" />

    <div style="color:Red;font-size:14px">@ViewBag.Message</div>

}

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

Step 4

Execute the application:

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

Click on the "Upload" button.