Progress Bar for FileUploadControl - Asp.net

Progress Bar for FileUploadControl - Asp.net



Many times I have asked this question that How can I show a progress Bar with FileUloadControl in Asp.net?

Its a very easy and a tactic task. The logic behind this is just to get the total time take for upload a file into server. The following code-snippet describes the same:


Design File:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="fileUpload.aspx.cs" Inherits="fileUpload" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
html
{
background-color: Gray;
font: 14px Georgia,Serif,Garamond;
}
h1
{
color: Green;
font-size: 18px;
border-bottom: Solid 1px orange;
}
.clear
{
clear: both;
}
.lbl
{
color: green;
font-weight: bold;
}
.upperColumn
{
margin: auto;
width: 600px;
border-bottom: Solid 1px orange;
background-color: white;
padding: 10px;
}
.bottomColumn
{
margin: auto;
width: 600px;
background-color: white;
padding: 10px;
}
</style>
<title>File Upload</title>

<script language="javascript" type="text/javascript">
var size = 2;
var id= 0;

function ProgressBar()
{
if(document.getElementById('<%=ImageFile.ClientID %>').value != "")
{
document.getElementById("divProgress").style.display = "block";
document.getElementById("divUpload").style.display = "block";
id = setInterval("progress()",20);
return true;
}
else
{
alert("Select a file to upload");
return false;
}

}

function progress()
{
size = size + 1;
if(size > 299)
{
clearTimeout(id);
}
document.getElementById("divProgress").style.width = size + "pt";
document.getElementById("<%=lblPercentage.ClientID %>").firstChild.data = parseInt(size / 3) + "%";
}

</script>

</head>
<body>
<form id="form1" runat="server">
<div class="upperColumn">
<h1>
File Upload Example</h1>
<asp:Label ID="lblImageFile" Text="Load Image" AssociatedControlID="ImageFile" runat="server"
CssClass="lbl" />
<asp:FileUpload ID="ImageFile" runat="server" />
<br />
<br />
<asp:Button ID="btnAddImage" runat="server" Text="Add Image" OnClientClick="return ProgressBar()"
OnClick="btnAddImage_Click" />
<asp:Button ID="btnShowImage" Text="Show Image" runat="server" OnClick="btnShowImage_Click" />
<div id="divUpload" style="display: none">
<div style="width: 300pt; text-align: center;">
Uploading...</div>
<div style="width: 300pt; height: 20px; border: solid 1pt gray">
<div id="divProgress" runat="server" style="width: 1pt; height: 20px; background-color: orange;
display: none">
</div>
</div>
<div style="width: 300pt; text-align: center;">
<asp:Label ID="lblPercentage" runat="server" Text="Label"></asp:Label></div>
<br />
<asp:Label ID="Label1" runat="server" ForeColor="Red" Text=""></asp:Label>
</div>
</div>
<br class="clear" />
<div class="bottomColumn">
<asp:DataList ID="dlImageList" RepeatColumns="3" runat="server">
<ItemTemplate>
<asp:Image ID="imgShow" ImageUrl='<%# Eval("Name","~/UploadImages/{0}")%>' Style="width: 200px"
runat="server" AlternateText='<%# Eval("Name") %>' />
<br />
<%# Eval("Name") %>
</ItemTemplate>
</asp:DataList>
</div>
</form>
</body>
</html>



Code-Behind File:


using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;

public partial class fileUpload : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void btnAddImage_Click(object sender, EventArgs e)
{
if (ImageFile.HasFile) //if file uploaded
{
if (checkFileType(ImageFile.FileName)) //Check for file types
{
try
{
//save file
ImageFile.SaveAs(MapPath("~/UploadImages/" + ImageFile.FileName));
//Response.Write("<script language =Javascript> alert('File Uploaded Successfully, Click Show Images');</script>");
System.Threading.Thread.Sleep(8000);
Label1.Text = "Upload successfull!";
}
catch (System.IO.DirectoryNotFoundException)
{
createDir();
}
}
}
else
{
Response.Write("<script language =Javascript> alert('Invalid File Format, choose .gif,.png..jpg.jpeg');</script>");
}
}
private bool checkFileType(string fileName)
{
string fileExt = Path.GetExtension(ImageFile.FileName);

switch (fileExt.ToLower())
{
case ".gif":
return true;
case ".png":
return true;
case ".jpg":
return true;
case ".jpeg":
return true;
default:
return false;
}

}
private void createDir()
{
DirectoryInfo myDir = new DirectoryInfo(MapPath("~/UploadImages/"));
myDir.Create();

//Now save file
ImageFile.SaveAs(MapPath("~/UploadImages/" + ImageFile.FileName));
Response.Write("<script language =Javascript> alert('File Uploaded Successfully,Click Show Images');</script>");
}
protected void btnShowImage_Click(object sender, EventArgs e)
{
DirectoryInfo myDir = new DirectoryInfo(MapPath("~/UploadImages/"));
try
{

dlImageList.DataSource = myDir.GetFiles();
dlImageList.DataBind();

}
catch (System.IO.DirectoryNotFoundException)
{
Response.Write("<script language =Javascript> alert('Upload File(s) First!');</script>");
}
}

}



Code-Behind File-using VB.NET:


Imports System
Imports System.Data
Imports System.Configuration
Imports System.Collections
Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts
Imports System.Web.UI.HtmlControls
Imports System.IO

Public Partial Class fileUpload
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

End Sub
Protected Sub btnAddImage_Click(ByVal sender As Object, ByVal e As EventArgs)
If ImageFile.HasFile Then
'if file uploaded
If checkFileType(ImageFile.FileName) Then
'Check for file types
Try
'save file
ImageFile.SaveAs(MapPath("~/UploadImages/" & ImageFile.FileName))
'Response.Write("<script language =Javascript> alert('File Uploaded Successfully, Click Show Images');");
System.Threading.Thread.Sleep(8000)
Label1.Text = "Upload successfull!"
Catch generatedExceptionName As System.IO.DirectoryNotFoundException
createDir()
End Try
End If
Else
Response.Write("<script language =Javascript> alert('Invalid File Format, choose .gif,.png..jpg.jpeg');</script>")
End If
End Sub
Private Function checkFileType(ByVal fileName As String) As Boolean
Dim fileExt As String = Path.GetExtension(ImageFile.FileName)

Select Case fileExt.ToLower()
Case ".gif"
Return True
Case ".png"
Return True
Case ".jpg"
Return True
Case ".jpeg"
Return True
Case Else
Return False

End Select
End Function
Private Sub createDir()
Dim myDir As New DirectoryInfo(MapPath("~/UploadImages/"))
myDir.Create()

'Now save file
ImageFile.SaveAs(MapPath("~/UploadImages/" & ImageFile.FileName))
Response.Write("<script language =Javascript> alert('File Uploaded Successfully,Click Show Images');")
End Sub
Protected Sub btnShowImage_Click(ByVal sender As Object, ByVal e As EventArgs)
Dim myDir As New DirectoryInfo(MapPath("~/UploadImages/"))
Try

dlImageList.DataSource = myDir.GetFiles()

dlImageList.DataBind()
Catch generatedExceptionName As System.IO.DirectoryNotFoundException
Response.Write("<script language =Javascript> alert('Upload File(s) First!');")
End Try
End Sub

End Class


Try above code and you will get following output as shown in snapshots:
  • Initial stage of the running code/application

  • Select to upload an image file [I have developed a sample which excepts only Image files]

  • Uploading images with Progress in %age

  • Message, when upload completed

  • Clicking on 'ShowImage' button will display uploaded image(s)


    Note:
  • In above code, the actual time of uploading may be different
  • Progress in on the basis of 100-chunks
  • Please feel free to revert back for any further assistant.


    Attachments

  • Article by Gaurav Aroraa
    Gaurav is a Microsoft Technology Specialist professional. He has awarded lifetime membership from Computer Society of India (CSI). He has more than 13yrs of experience in the industry. Currently, he is working in the capacity of Solution Architect with an MNC. He is serving to the various communities since 1999.

    Follow Gaurav Aroraa or read 157 articles authored by Gaurav Aroraa

    Comments

    Author: VMRK06 Jul 2009 Member Level: Gold   Points : 1

    Its really a good one .Can you please add some screenshot to show how it works in IE

    Author: Gaurav Aroraa09 Jul 2009 Member Level: Gold   Points : 1

    Rajkumar,

    Thanks for your words, I have uplaoded snapshots from IE6.0. Hope , you will be benefited.

    Author: satya10 Jul 2009 Member Level: Gold   Points : 1

    The way you have formatted the resource easily understandable.

    I even want to post my resource in the same, how do I post it.

    Please suggest me......

    Author: Gaurav Aroraa10 Jul 2009 Member Level: Gold   Points : 0

    Hi Satya,
    You can do it. What kind of help you want from me.

    Author: Mrs. Meetu Choudhary Nanda11 Jul 2009 Member Level: Gold   Points : 1

    Hi Gaurav,
    Really nice and well formatted resource.. Keep it up.

    ++
    Thanks and Regards.
    Meetu Choudhary.
    Site Coordinator.

    Author: Dotnet Developer-201513 Jul 2009 Member Level: Gold   Points : 0

    Hi Gaurav,
    pl convert .aspx,.vb

    Author: Abhay Kumar Raut14 Aug 2009 Member Level: Gold   Points : 1

    Hi Gaurav,

    good one .

    keep it up.

    contribute more.

    Thanks and Regards
    Abhay

    Author: Gaurav Aroraa22 Aug 2009 Member Level: Gold   Points : 0

    R. Jaya Kumar,

    Thanks for your suggestions, I supplied vb.net code too.

    Author: Dotnet Developer-201522 Aug 2009 Member Level: Gold   Points : 1

    Really Good one
    thanks Mr.Gaurav Arora
    again attach zip format then alert intimate intially so intimate populate using labels



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: