Hi rani,

Using the below article i have created the example.

Upload multiple files with Progress Bar using AngularJS in ASP.Net using C# and VB.Net

Check this example. Now please take its reference and correct your code.

Database

I have made use of the following table tblFilesPath with the schema as follows.

I have already inserted few records in the table.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.directive.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.factory.js"></script>
<script type="text/javascript" src="https://rawgithub.com/vivendi/angular-datatables/master/src/angular-datatables.bootstrap.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', ['datatables', 'ngFileUpload'])
    app.controller('MyController', function ($scope, $http, Upload, $timeout) {
        PopulateFiles();
        $scope.ShowHide = false;
        $scope.SelectFile = function (file) {
            $scope.SelectedFile = file;
        };
        $scope.EditData = function (file) {
            $scope.Id = file.Id;
            $scope.Name = file.Name;
            $scope.ShowHide = true;
        };
        $scope.Upload = function () {
            Upload.upload({
                url: 'HandlerCS.ashx?Id=' + $scope.Id + '&Name=' + $scope.Name,
                data: {
                    files: $scope.SelectedFile
                }
            }).then(function (response) {
                $timeout(function () {
                    PopulateFiles();
                    $scope.ShowHide = false;
                });
            }, function (response) {
                if (response.status > 0) {
                    var errorMsg = response.status + ': ' + response.data;
                    alert(errorMsg);
                }
            });
        };
        function PopulateFiles() {
            $http.post("CS.aspx/GetFiles", { headers: { 'Content-Type': 'application/json'} })
            .then(function (response) {
                $scope.Files = JSON.parse(response.data.d);
            }, function (response) {
                $window.alert(response.responseText);
            });
        }
    });
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <table ng-show="ShowHide" class="table table-bordered table-responsive">
        <tr>
            <td>Id</td>
            <td><input type="text" readonly="readonly" ng-model="Id" /></td>
        </tr>
        <tr>
            <td>Name</td>
            <td><input type="text" ng-model="Name" /></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="file" ngf-select="SelectFile($file)" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="button" value="Update" ng-click="Upload()" />
            </td>
        </tr>
    </table>
    <br />
    <div class="table table-bordered">
        <table datatable="ng" class="table table-bordered table-responsive">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Image</th>
                    <th>Edit</th>
                </tr>
            </thead>
            <tbody>
                <tr dt-rows ng-repeat="file in Files">
                    <td>{{file.Id}}</td>
                    <td>{{file.Name}}</td>
                    <td><img ng-src="{{file.Path}}" alt="{{file.Name}}.jpg" style="height: 100px; width: 100px" /></td>
                    <td><input type="button" id="btnEdit" class="btn btn-primary" value="Edit" ng-click="EditData(file)" /></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Namespaces

C#

using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;

VB.Net

Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services

Code

C#

[WebMethod]
public static string GetFiles()
{
    List<object> files = new List<object>();
    string sql = "SELECT Id,Name,Path FROM tblFilesPath";
    using (SqlConnection conn = new SqlConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand(sql))
        {
            cmd.Connection = conn;
            conn.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    files.Add(new
                    {
                        Id = sdr["Id"],
                        Name = sdr["Name"],
                        Path = sdr["Path"]
                    });
                }
            }
            conn.Close();
        }
        return (new JavaScriptSerializer().Serialize(files));
    }
}

VB.Net

<WebMethod()>
Public Shared Function GetFiles() As String
    Dim files As List(Of Object) = New List(Of Object)()
    Dim sql As String = "SELECT Id,Name,Path FROM tblFilesPath"
    Using conn As SqlConnection = New SqlConnection()
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using cmd As SqlCommand = New SqlCommand(sql)
            cmd.Connection = conn
            conn.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    files.Add(New With {
                        .Id = sdr("Id"),
                        .Name = sdr("Name"),
                        .Path = sdr("Path")
                    })
                End While
            End Using
            conn.Close()
        End Using
 
        Return (New JavaScriptSerializer().Serialize(files))
    End Using
End Function

Handler

C#

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Configuration;
using System.Data.SqlClient;
using System.Web;
using System.IO;

public class Handler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        string id = context.Request.QueryString["Id"];
        string name = context.Request.QueryString["Name"];

        HttpPostedFile postedFile = context.Request.Files[0];
        string folderPath = context.Server.MapPath("~/Images/");
        if (!Directory.Exists(folderPath))
        {
            Directory.CreateDirectory(folderPath);
        }
        postedFile.SaveAs(folderPath + postedFile.FileName);

        using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString))
        {
            using (SqlCommand cmd = new SqlCommand("UPDATE tblFilesPath SET Name=@Name, Path=@Path WHERE Id=@Id"))
            {
                cmd.Parameters.AddWithValue("@Id", id);
                cmd.Parameters.AddWithValue("@Name", name);
                cmd.Parameters.AddWithValue("@Path", "Images/" + postedFile.FileName);
                cmd.Connection = con;
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }
        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.Configuration
Imports System.Data.SqlClient
Imports System.Web
Imports System.IO

Public Class Handler : Implements IHttpHandler
    
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim id As String = context.Request.QueryString("Id")
        Dim name As String = context.Request.QueryString("Name")
        Dim postedFile As HttpPostedFile = context.Request.Files(0)
        Dim folderPath As String = context.Server.MapPath("~/Images/")

        If Not Directory.Exists(folderPath) Then
            Directory.CreateDirectory(folderPath)
        End If

        postedFile.SaveAs(folderPath & postedFile.FileName)
        Using con As SqlConnection = New SqlConnection(ConfigurationManager.ConnectionStrings("constr").ConnectionString)
            Using cmd As SqlCommand = New SqlCommand("UPDATE tblFilesPath SET Name=@Name, Path=@Path WHERE Id=@Id")
                cmd.Parameters.AddWithValue("@Id", id)
                cmd.Parameters.AddWithValue("@Name", name)
                cmd.Parameters.AddWithValue("@Path", "Images/" & postedFile.FileName)
                cmd.Connection = con
                con.Open()
                cmd.ExecuteNonQuery()
                con.Close()
            End Using
        End Using

        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

Screenshot