In this article I will explain with an example, how to upload multiple files with Progress Bar using AngularJS and AJAX in ASP.Net using C# and VB.Net.
Multiple files such as Image, PDF, Word, Excel, etc. and also large Music and Video files such as MP3 and MP4 will be easily uploaded with Progress Bar using AngularJS and AJAX in ASP.Net.
This article makes use the ngFileUpload AngularJS directive which makes use of Generic HTTP Handlers for uploading files using AngularJS and AJAX in ASP.Net.
 
 
Generic HTTP Handler
Following is the Generic HTTP Handler which will handle the files sent from the AngularJS client for upload.
It first loops through the Request.Files collections and then inside the loop, each file is saved in the folder named Uploads.
Finally a success response is sent back to the AngularJS client.
C#
<%@ WebHandler Language="C#" Class="Handler" %>
 
using System;
using System.Web;
using System.IO;
 
public class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        foreach (string key in context.Request.Files)
        {
            HttpPostedFile postedFile = context.Request.Files[key];
            string folderPath = context.Server.MapPath("~/Uploads/");
            if (!Directory.Exists(folderPath))
            {
                Directory.CreateDirectory(folderPath);
           }
            postedFile.SaveAs(folderPath + postedFile.FileName);
        }
        context.Response.StatusCode = 200;
        context.Response.ContentType = "text/plain";
        context.Response.Write("Success");
    }
 
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}
 
VB.Net
<%@ WebHandler Language="VB" Class="Handler" %>
 
Imports System
Imports System.Web
Imports System.IO
Public Class Handler : Implements IHttpHandler
   
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        For Each key As String In context.Request.Files
            Dim postedFile As HttpPostedFile = context.Request.Files(key)
            Dim folderPath As String = context.Server.MapPath("~/Uploads/")
            If Not Directory.Exists(folderPath) Then
                Directory.CreateDirectory(folderPath)
            End If
            postedFile.SaveAs(folderPath + postedFile.FileName)
        Next
       
        context.Response.StatusCode = 200
        context.Response.ContentType = "text/plain"
        context.Response.Write("Success")
    End Sub
 
    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property
 
End Class
 
 
Upload multiple files with Progress Bar using AngularJS in ASP.Net
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
 
The HTML DIV consists of an HTML FileUpload element for which the multiple property is set, so that user can select multiple files.
The HTML FileUpload element has also been assigned the ngf-select directive has been assigned so that when files are selected in the HTML FileUpload element, it makes call to the UploadFiles function inside the AngularJS controller.
The selected files are sent to the Generic HTTP Handler using the Upload function of the ngFileUpload AngularJS directive.
Timeout function has been used which periodically checks the response of the upload and it updates the Progress Bar.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.13/ng-file-upload.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', ['ngFileUpload'])
    app.controller('MyController', function ($scope, Upload, $timeout) {
        $scope.UploadFiles = function (files) {
            $scope.SelectedFiles = files;
            if ($scope.SelectedFiles && $scope.SelectedFiles.length) {
                Upload.upload({
                    url: 'Handler.ashx',
                    data: {
                        files: $scope.SelectedFiles
                    }
                }).then(function (response) {
                    $timeout(function () {
                        $scope.Result = response.data;
                    });
                }, function (response) {
                    if (response.status > 0) {
                        var errorMsg = response.status + ': ' + response.data;
                        alert(errorMsg);
                    }
                }, function (evt) {
                    var element = angular.element(document.querySelector('#dvProgress'));
                    $scope.Progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
                    element.html('<div style="width: ' + $scope.Progress + '%">' + $scope.Progress + '%</div>');
                });
            }
        };
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <input type="file" multiple="multiple" ngf-select="UploadFiles($files)" />
    <hr />
    Files:
    <ul><li ng-repeat="file in SelectedFiles">{{file.name}}</li></ul>
    <div id = "dvProgress" class="progress" ng-show="Progress >= 0">
    </div>
</div>
 
 
Uploading Large files
In order to upload large files, you will need to set the following setting in the system.web section of the Web.Config file.
The executionTimeout value is set to 240 seconds while the maxRequestLength is set to the maximum size of the files in Bytes.
Note: These values can be changed as per your requirement.
 
<httpRuntime executionTimeout="240" maxRequestLength="1048576" />
 
 
Screenshot
Upload multiple files with Progress Bar using AngularJS in ASP.Net using C# and VB.Net
 
 
Browser Compatibility

The above code has been tested in the following browsers only in versions that support HTML5.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Downloads
Download Code