User Id :    Password :      New Member   Forgot Password
 
Uploading file with Progress Bar in asp.net
Description In this article I am going to show how we can upload file with progress bar in asp.net   No. of Views     824
  Rating     0
Author Rahul Saxena   Posted On     20 Oct 2011
Tags ASP.NET,General    

Sample Code   Download Code

 

In this article I am going to show how we can upload file with progress bar. I posted articles about uploading file, but in this article I am showing uploading of file with progress bar. Here in this article I am upload two type files namely video and image. First user have to select  what type of file he/she want to upload and after uploading he can see uploaded file below in a datalist.

The aspx code for this is

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

 

<div>
        <table cellpadding="0" cellspacing="0" width="80%" align="center" style="background: White;
            padding: 10px;" border="4">
            <tr>
                <td align="left" style="border: none;">
                    <div>
                        <h1>
                            Select File To Upload</h1>
                        <asp:Label ID="lblImageFile" Text="Your File" AssociatedControlID="ImageFile" runat="server"
                            CssClass="lbl" />
                        <asp:DropDownList ID="DListFileType" runat="server">
                            <asp:ListItem Text="Image" Value="Image"></asp:ListItem>
                            <asp:ListItem Text="Video" Value="Video"></asp:ListItem>
                        </asp:DropDownList>
                        <input id="ImageFile" contenteditable="false" runat="server" name="ImageFile" type="file"
                            style="width: 300px" />&nbsp;&nbsp;
                        <asp:Button ID="btnAddImage" runat="server" Text="Upload File" OnClientClick="return ProgressBar()"
                            OnClick="btnAddImage_Click" />
                        <br />
                        <br />
                        <asp:Label ID="lblError" runat="server" ForeColor="Red" Font-Bold="true" Visible="false"></asp:Label>
                        <br />
                        <br />
                        <asp:Button ID="btnShowImage" Text="Show Image" runat="server" OnClick="btnShowImage_Click" />
                        <asp:Button ID="btnShowVideo" Text="Show Video" runat="server" OnClick="btnShowVideo_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: Blue;
                                   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"></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","~/Images/{0}")%>' Style="width: 200px"
                                    runat="server" AlternateText='<%# Eval("Name") %>' />
                                <br />
                               
                            </ItemTemplate>
                        </asp:DataList>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div class="bottomColumn">
                        <asp:DataList ID="DataListVideo" RepeatColumns="3" runat="server" Width="100%">
                            <ItemTemplate>
                                <object id="mediaPlayer" classid='clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95' standby='Loading....'
                                    type='application/x-oleobject' width="160px">
                                    <param name="movie" value="<%# Eval("Name","http://localhost/UploadFileWithProgressBar/Video/{0}")%>">
                                    <param name='animationatStart' value='false'>
<%-- Here your URL --%>
 
                                    <param name='transparentatStart' value='false'>
                                    <param name='autoStart' value='false'>
                                    <param name='showControls' value='true'>
                                    <param name='clickToPlay' value='true'>
                                    <param name="ShowStatusBar" value='true'>
                                    <param name="windowlessVideo" value='false'>
                                    <embed type="application/x-mplayer2" pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
                                        id="" name="mediaPlayer" class="MediaPlayerWidth" src="<%# Eval("Name","http://localhost/UploadFileWithProgressBar/Video/{0}")%>"> </embed>
 
<%-- Here your URL --%>
 
                                </object>
                            </ItemTemplate>
                        </asp:DataList>
                    </div>
                </td>
            </tr>
        </table>
    </div>

 

 

This is the aspx.cs code

 

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;
using System.Data.SqlClient;
using System.Text;
using System.Collections.Generic;
using System.Linq;
using System.Diagnostics;

public partial class _Default : System.Web.UI.Page
{
    string DownloadFileType;
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void btnAddImage_Click(object sender, EventArgs e)
    {
        DownloadFileType = DListFileType.SelectedValue.ToString();
        string strFileName;
        HtmlInputFile htmlFile = (HtmlInputFile)ImageFile;
 
        if (htmlFile.PostedFile.ContentLength > 0)
        {
            string sFormat = String.Format("{0:#.##}", (float)htmlFile.PostedFile.ContentLength / 2048);
            ViewState["ImageName"] = htmlFile.PostedFile.FileName.Substring(htmlFile.PostedFile.FileName.LastIndexOf("\\") + 1);
            strFileName = ViewState["ImageName"].ToString();
            string sExtension = strFileName.Substring(strFileName.LastIndexOf(".") + 1);
 
            if (checkFileType(sExtension))  //Check for file types
            {
                if (DownloadFileType == "Image")
                {
                    htmlFile.PostedFile.SaveAs(Server.MapPath("~/Images/" + strFileName));
                }
                else if (DownloadFileType == "Video")
                {
                    htmlFile.PostedFile.SaveAs(Server.MapPath("~/Video/" + strFileName));                   
                lblError.Visible = false;
                System.Threading.Thread.Sleep(8000);
                Label1.Visible = true;
                Label1.Text = "Upload successfull!";
                ShowImage();
                ShowVideo();
            }
            else
            {
                lblError.Visible = true;
                lblError.Text = "Please Check your file";
            }
        }
 
        else
        {
            lblError.Visible = true;
            lblError.Text = "Please Select any file to upload";
        }
    }

    private bool checkFileType(string FileExtension)
    {
        if (DownloadFileType == "Video")
        {
            switch (FileExtension.ToLower())
            {
                case "wmv":
                    return true;
                case "avi":
                    return true;
                case "mpg":
                    return true;
                case "wav":
                    return true;
                case "mid":
                    return true;
                case "asf":
                    return true;
                case "mpeg":
                    return true;
                case "dat":
                    return true;
                default:
                    return false;
            }
        }
        else if (DownloadFileType == "Image")
        {
            switch (FileExtension.ToLower())
            {
                case "gif":
                    return true;
                case "png":
                    return true;
                case "jpg":
                    return true;
                case "jpeg":
                    return true;
                default:
                    return false;
            }
        }
        return false;
    }
 
    protected void btnShowImage_Click(object sender, EventArgs e)
    {
        ShowImage();
    }
 
    public void ShowImage()
    {
        DirectoryInfo myImageDir = new DirectoryInfo(MapPath("~/Images/"));
        try
        {
            dlImageList.DataSource = myImageDir.GetFiles();
            dlImageList.DataBind();
        }
        catch (System.IO.DirectoryNotFoundException)
        {
            Response.Write("<script language =Javascript> alert('Upload File(s) First!');</script>");
        }
    }
 
    protected void btnShowVideo_Click(object sender, EventArgs e)
    {
        ShowVideo();
    }
 
    public void ShowVideo()
    {
        DirectoryInfo myVideoDir = new DirectoryInfo(MapPath("~/Video/"));
        try
        {
            DataListVideo.DataSource = myVideoDir.GetFiles();
            DataListVideo.DataBind();
        }
        catch (System.IO.DirectoryNotFoundException)
        {
            Response.Write("<script language =Javascript> alert('Upload File(s) First!');</script>");
        }
    }
 
}

 

When we run the application then the output will be as follows

 

 

Figure 1.
 
From DropDownlist user can select the type of file to be uploaded

When uploading an image file.

 

 

Figure 2.

After uploading an image
 

 

 

Figure 3.

If user has selected video as the file type to be uploaded.
 

 

 

 

 

 

 

About Author

About Author Rahul shows great interests in working with Microsoft technologies. He specializes in the implementation of DataBase & Graphics. His area of expertise includes: C#, ASP.NET,ADO.NET,Windows Forms & Web Services. He hails from background , Master's in Computer Application. With programming he loves photography, traveling and reading books. Rahul Saxena
No Photo
 
Country India
Company N/A
Home Page N/A

Rate this article

Rating options from poor, fair, good, very good to excelent.  
 

Comments

     
Write your comment here.  
Comment
Verification Code   
  
    
 
Section sponsored by