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

Last Reply 8 days ago By dharmendr

Posted 13 days 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

http://www.aspforums.net/Threads/637425/Display-Bootstrap-progress-bar-while-uploading-file-on-Button-click-using-jQuery-in-ASPNet/

Posted 8 days ago

Hi micah,

For this Generic handler is used.

Refer the below sample.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .progressbar
        {
            width: 300px;
            height: 8px;
        }
        .progressbarlabel
        {
            width: 300px;
            height: 8px;
            position: absolute;
            text-align: center;
            font-size: small;
        }
    </style>
    <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");
                xhr.send(data);

                $("#progressbar").progressbar({
                    max: 100,
                    change: function (evt, ui) { $("#progresslabel").text($("#progressbar").progressbar("value") + "%"); },
                    complete: function (evt, ui) { $("#progresslabel").text("File upload successfully!"); }
                });
                evt.preventDefault();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <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">
            </div>
        </div>
    </div>
    </form>
</body>
</html>

C#

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.
        }
    }
}

Uploader.ashx

<%@ 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);
            //file.SaveAs(fileName);
        }
        context.Response.ContentType = "text/plain";
        context.Response.Write("File(s) uploaded successfully!");
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

VB.Net

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

Uploader.ashx

<%@ 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)
            'file.SaveAs(fileName);
            Dim fileName As String = context.Server.MapPath(Convert.ToString("~/Files/") & key)
        Next
        context.Response.ContentType = "text/plain"
        context.Response.Write("File(s) uploaded successfully!")
    End Sub
 
    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            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