Multiple File Upload Using HTML5, jQuery Ajax and Asp.Net Web API – C# and Vb.Net

I have previously written two articles related to multiple file upload procedures in Asp.Net. In the first article, I have covered file upload server side control in Asp.Net 2.0 and in the second, I have showed the use of a Plug-in named MultiFile-Plugin, a cross browser solution for multiple file upload. However, in this article I am going to show you how to do multiple file upload using HTML5, jQuery Ajax and Web API in Asp.Net.

Html5 multiple Attribute

For multiple file selection, I am using HTML5 <input> type with multiple attribute. It’s a Boolean attribute and it takes values like true or false.

Syntax

<input multiple />

Please remember, that many older versions of IE (IE 9 and below), will not support the multiple attribute. To set the value for the attribute, you may use multiple=true or simply multiple. Set multiple=false to remove multiple selection.

Browser Support:
Chrome 39.0 - Yes | FireFox 34.0 - Yes | Internet Explorer 10 and Above - Yes | Safari – Yes

Also Read: New HTML5 Input Types and Attributes

Create FileUpload Web API

Start Visual Studio, create a New Project, choose Asp.Net MVC 4 Web Application and name it FileUpload. From the Project Template for New ASP.NET MVC 4 Project select Web API template and press OK.

Related: Create Your First Web API in Asp.Net MVC 4

We don't need a Model for our example here. Therefore, we’ll simply create a controller in our WebAPI.

Open Solution Explorer window in the project. Find Controllers folder, right click it and choose Add and Controller…. In the Add Controller window, type FileUploadController in the Controller Name box. From the Template dropdown list, choose Empty MVC controller and click the Add button. It will create a “.cs” file (.vb for Visual Basic).

FileUploadController.cs (For CSharp)
using System;

using System.Net.http;
using System.Web.http;

using System.IO;

namespace FileUpload
{
    public class FileUploadController : ApiController
    {
        [HttpPost()]
        public string UploadFiles()
        {
            int iUploadedCnt = 0;

            // DEFINE THE PATH WHERE WE WANT TO SAVE THE FILES.
            string sPath = "";
            sPath = System.Web.Hosting.HostingEnvironment.MapPath("~/locker/");

            System.Web.HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;

            // CHECK THE FILE COUNT.
            for (int iCnt = 0; iCnt <= hfc.Count - 1; iCnt++)
            {
                System.Web.HttpPostedFile hpf = hfc[iCnt];

                if (hpf.ContentLength > 0)
                {
                    // CHECK IF THE SELECTED FILE(S) ALREADY EXISTS IN FOLDER. (AVOID DUPLICATE)
                    if (!File.Exists(sPath + Path.GetFileName(hpf.FileName)))
                    {
                        // SAVE THE FILES IN THE FOLDER.
                        hpf.SaveAs(sPath + Path.GetFileName(hpf.FileName));
                        iUploadedCnt = iUploadedCnt + 1;
                    }
                }
            }

            // RETURN A MESSAGE.
            if (iUploadedCnt > 0) {
                return iUploadedCnt + " Files Uploaded Successfully";
            }
            else {
                return "Upload Failed";
            }
        }
    }
}

Note: You must first create a folder in the root directory of your project called locker. You will upload your files in this folder. You may later name the folder as you wish.

FileUploadController.vb
Option Explicit On

Imports System.Net.http
Imports System.Web.http

Imports System.IO

Namespace FileUpload
    Public Class FileUploadController
        Inherits ApiController

        <HttpPost()> _
        Public Function UploadFiles() As String

            Dim iUploadedCnt As Integer = 0

            ' DEFINE THE PATH WHERE WE WANT TO SAVE THE FILES.
            Dim sPath As String = ""
            sPath = System.Web.Hosting.HostingEnvironment.MapPath("~/locker/")

            Dim hfc As System.Web.HttpFileCollection = 
                System.Web.HttpContext.Current.Request.Files

            For iCnt As Integer = 0 To hfc.Count - 1        ' CHECK THE FILE COUNT.
                Dim hpf As HttpPostedFile = hfc(iCnt)
                If hpf.ContentLength > 0 Then

                    ' CHECK IF THE SELECTED FILE(S) ALREADY EXISTS IN FOLDER. (AVOID DUPLICATE)
                    If Not File.Exists(sPath & Path.GetFileName(hpf.FileName)) Then

                        ' SAVE THE FILES IN THE FOLDER.
                        hpf.SaveAs(sPath & Path.GetFileName(hpf.FileName))
                        iUploadedCnt = iUploadedCnt + 1
                    End If
                End If
            Next

            If Val(iUploadedCnt) > 0 Then
                Return iUploadedCnt & " Files Uploaded Successfully"
            Else
                Return "Upload Failed"
            End If

        End Function
    End Class
End Namespace

The controller has a public function called UploadFiles(), which is called by the Ajax using a POST request. The function returns a string value, as a confirmation, saying if the loaded or has failed.

HtmlFileCollection Class

In the beginning of this article, I have mentioned about the first article that I have written before, about file upload control in Asp.Net’s version 2.0. The reason I mentioned, since I am using the HtmlFileCollection class, introduced in the version with System.io namespace. It provides the necessary methods to get details about files uploaded by a client application. Details such as name of the file, size etc. This class is important.

Finally, add an HTML page to your project. Here, we will add an HTML5 <input> box with type file, with multiple attribute. In-addition we need to add the jQuery script to make an Ajax POST request to the API.

The Markup
<!DOCTYPE html>
<html>
<head>
    <title>Multiple File Upload with HTML5, Ajax and Web API</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>

<body>

    <form action="">
        Select Your Files:  
        <input type="file" id="file" name="file" multiple />
        <input id="btUpload" type="button" value="Upload File"/>
        <p></p>
    </form>

</body>
The Script
<script>
    $(document).ready(function () {
        $("#btUpload").click(function () {

            var data = new FormData($('form')[0]);

            $.ajax({
                type: "POST",
                url: '/api/fileupload/',    // CALL WEB API TO SAVE THE FILES.
                enctype: 'multipart/form-data',
                contentType: false,
                processData: false,         // PREVENT AUTOMATIC DATA PROCESSING.
                cache: false,
                data: data, 		        // DATA OR FILES IN THIS CONTEXT.
                success: function (data, textStatus, xhr) {
                    $('p').text(data);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus + ': ' + errorThrown);
                }
            });
        });
    });
</script>
</html>

In the markup section, I have added the file upload control and a button inside the <form> tag. Later, in the script, I am extracting details in the <form> by using the FormData object.

Ref: Learn more about FormData objects

var formData = new FormData(someFormElement);

To understand jQuery events such contentType and processData, I would ask to you read the article here. Particularly read detail with the header Sending Data to the Server. Both events have a value set as false.

That’s it. Thanks for reading.

Previous - Asp.Net Web API Example – AutoComplete Textbox using jQuery and Web API – C# and Vb.NetNext - How Do you Map the File Path in Asp.Net Web API? Take a look at this Solution



Like this Article? Subscribe now, and get all the latest articles and tips, right in your inbox.

Enter your email id

Delivered by FeedBurner