Display File Upload Progress with jQuery UI Progressbar using C#, VB.Net and Generic Handler in ASP.Net

Last Reply 5 months ago By dharmendr

Posted 5 months ago

This example of file upload with progress bar is not working the right way, the progress bar does start until file is uploded and is been displayed on page before the progress bar start loading. Please can you help to correct it.

see the link


Posted 5 months ago Modified on 4 months ago

Hi micah,

For this Generic handler is used.

Refer the below sample.


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style type="text/css">
            width: 300px;
            height: 8px;
            width: 300px;
            height: 8px;
            position: absolute;
            text-align: center;
            font-size: small;
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("#FileUploadpost").change(function (evt) {
                var xhr = new XMLHttpRequest();
                var data = new FormData();
                var files = $("#FileUploadpost").get(0).files;
                for (var i = 0; i < files.length; i++) {
                    data.append(files[i].name, files[i]);
                xhr.upload.addEventListener("progress", function (evt) {
                    if (evt.lengthComputable) {
                        var progress = Math.round(evt.loaded * 100 / evt.total);
                        $("#progressbar").progressbar("value", progress);
                }, false);
                xhr.open("POST", "Uploader.ashx");

                    max: 100,
                    change: function (evt, ui) { $("#progresslabel").text($("#progressbar").progressbar("value") + "%"); },
                    complete: function (evt, ui) { $("#progresslabel").text("File upload successfully!"); }
    <form id="form1" runat="server">
        <asp:Label runat="server" Text="Select File(s) to Upload : "></asp:Label>
        <asp:FileUpload ID="FileUploadpost" runat="server" AllowMultiple="false" />
        <asp:Button ID="btnUpload" runat="server" Text="Upload" OnClick="Save" />
        <div id="progressbar" class="progressbar">
            <div id="progresslabel" class="progressbarlabel">


protected void Save(object sender, EventArgs e)
    string folderPath = Server.MapPath("~/Videos/"); //Please enter your folder Name here.
    string ImagefolderPath = Server.MapPath("~/UserImage/"); //Please enter your folder Name here.
    string strname = "";
    string extension = "";
    if (FileUploadpost.HasFile)
        strname = FileUploadpost.FileName;
        extension = System.IO.Path.GetExtension(strname);

        if (extension.ToLower() == ".jpg" || extension.ToLower() == ".png" || extension.ToLower() == ".gif" || extension.ToLower() == ".jpeg")
            FileUploadpost.SaveAs(ImagefolderPath + strname); //save file from fileUpload to folder here.
        // Video extension.
        else if (extension.ToLower() == ".mp4" || extension.ToLower() == ".wmv" || extension.ToLower() == ".flv" || extension.ToLower() == ".vob" || extension.ToLower() == ".dat")
            FileUploadpost.SaveAs(folderPath + strname); //save file from fileUpload to folder here.


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

using System;
using System.Web;

public class Uploader : IHttpHandler

    public void ProcessRequest(HttpContext context)
        HttpFileCollection files = context.Request.Files;
        foreach (string key in files)
            HttpPostedFile file = files[key];
            string fileName = context.Server.MapPath("~/Files/" + key);
        context.Response.ContentType = "text/plain";
        context.Response.Write("File(s) uploaded successfully!");

    public bool IsReusable
            return false;


Protected Sub Save(sender As Object, e As EventArgs)
	Dim folderPath As String = Server.MapPath("~/Videos/")
	'Please enter your folder Name here.
	Dim ImagefolderPath As String = Server.MapPath("~/UserImage/")
	'Please enter your folder Name here.
	Dim strname As String = ""
	Dim extension As String = ""
	If FileUploadpost.HasFile Then
		strname = FileUploadpost.FileName
		extension = System.IO.Path.GetExtension(strname)

		If extension.ToLower() = ".jpg" OrElse extension.ToLower() = ".png" OrElse extension.ToLower() = ".gif" OrElse extension.ToLower() = ".jpeg" Then
				'save file from fileUpload to folder here.
			FileUploadpost.SaveAs(ImagefolderPath & strname)
		' Video extension.
		ElseIf extension.ToLower() = ".mp4" OrElse extension.ToLower() = ".wmv" OrElse extension.ToLower() = ".flv" OrElse extension.ToLower() = ".vob" OrElse extension.ToLower() = ".dat" Then
				'save file from fileUpload to folder here.
			FileUploadpost.SaveAs(folderPath & strname)
		End If
	End If
End Sub


<%@ WebHandler Language="VB" Class="Handler" %>

Imports System
Imports System.Web

Public Class Handler : Implements IHttpHandler
    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim files As HttpFileCollection = context.Request.Files
        For Each key As String In files
            Dim file As HttpPostedFile = files(key)
            Dim fileName As String = context.Server.MapPath(Convert.ToString("~/Files/") & key)
        context.Response.ContentType = "text/plain"
        context.Response.Write("File(s) uploaded successfully!")
    End Sub
    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
            Return False
        End Get
    End Property

End Class


I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html