Fileupload con progress bar en Asp.Net 2.0

Primero quería pedir mis disculpas porque tenía tantas ganas de postear, pero he estado requeté ocupado
proyectos en la oficina, algunos pendientes por afuera pa el “picoteo” como decimos aquí 😛 y sobre todo estudiando para certificarme
por cierto ya soy MCTS Windows y Web el examen que tome fue el 70-526.

Manos a la obra…

Hace tiempo, un cliente nos pidió un FileUpload, pues que fácil no!!! Pero uno de los requerimientos del mismo era que
tenía que incluir un progress Bar, pues yo rompiéndome la cabeza y sin saber qué hacer, encontré una solución.

Consiste en un simple UserControl con un FIleUpload y un botón, con el siguiente código de declaración:

<%@ Control Language=”C#” AutoEventWireup=”true” CodeFile=”Uploader.ascx.cs” Inherits=”Uploader” %>

<asp:FileUpload ID=”upUserCtrl” runat=”server” />

<asp:Button ID=”btnUpload” runat=”server” OnClick=”btnUpload_Click” Text=”Upload” />

En el CodeBehind, tenemos dos funciones javascripts, una para imprimir el progress bar y otra por supuesto para eliminar cuando el archivo ya se haya guardado
en nuestra carpeta o BD, como la quieran guardar.

Aquí les dejo el código completo:

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.Text;

using System.Threading;

public partial class Uploader : System.Web.UI.UserControl

{

//

public string strLocation = “c:\Geeks\progressBar”;

protected void Page_Load(object sender, EventArgs e)

{

}

//Codigo JavaScript para Imprimir el Progres

public static void Imprimir()

{

StringBuilder sb = new StringBuilder();

sb.Append(“<div id=’updiv’ style=’Font-weight:bold;font-size:11pt;Left:320px;COLOR:black;font-family:verdana;Position:absolute;Top:140px;Text-Align:center;’>”);

sb.Append(“&nbsp;<script> var up_div=document.getElementById(‘updiv’);up_div.innerText=”;</script>”);

sb.Append(“<script language=javascript>”);

sb.Append(“var dts=0; var dtmax=10;”);

sb.Append(“function ShowWait(){var output;output=’Espere mientras se carga el archivo!’;dts++;if(dts>=dtmax)dts=1;”);

sb.Append(“for(var x=0;x < dts; x++){output+=’’;}up_div.innerText=output;up_div.style.color=’red’;}”);

sb.Append(“function StartShowWait(){up_div.style.visibility=’visible’;ShowWait();window.setInterval(‘ShowWait()’,100);}”);

sb.Append(“StartShowWait();</script>”);

HttpContext.Current.Response.Write(sb.ToString());

HttpContext.Current.Response.Flush();

}

//Codigo javascript para borrar el progressbar

public static void Clear()

{

StringBuilder sbc = new StringBuilder();

sbc.Append(“<script language=’javascript’>”);

sbc.Append(“alert(‘Se ha completado correctamente!’);”);

sbc.Append(“up_div.style.visibility=’hidden’;”);

sbc.Append(“history.go(-1)”);

sbc.Append(“</script>”);

HttpContext.Current.Response.Write(sbc);

}

protected void btnUpload_Click(object sender, EventArgs e)

{

string strFileName = System.IO.Path.GetFileName(upUserCtrl.PostedFile.FileName);

try

{

if (strFileName != “”)

{

//Imprimir el ProgressBar

Imprimir();

upUserCtrl.PostedFile.SaveAs(strLocation + strFileName);

Thread.Sleep(2000);

Clear();

}

}

catch(Exception ex)

{

Response.Write(ex.Message);

}

}

}

Bueno y logicamente llamamos nuestro userControl desde una pagina .aspx, en este caso llamemosla Default.aspx

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %>

<%@ Register Src=”Uploader.ascx” TagName=”Uploader” TagPrefix=”uc1″ %>

<!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 id=”Head1″ runat=”server”>

<title>Geeks Bar</title>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

<uc1:Uploader ID=”Uploader1″ runat=”server” />

</div>

</form>

</body>

</html>

Espero le sea de utilidad.

Update:

Por peticion, un lector nos pidio que hicieramos el codigo en VB.

Aqui esta el codigo 

 

<%@ Control Language=”VB” AutoEventWireup=”true” CodeFile=”Uploader.ascx.vb” Inherits=”Uploader” %>

<asp:FileUpload ID=”upUserCtrl” runat=”server” />

<asp:Button ID=”btnUpload” runat=”server” OnClick=”btnUpload_Click” Text=”Upload” /> 

 

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


Imports System.Threading

Partial Public Class Uploader

Inherits System.Web.UI.UserControl

Public strlocation As String = “C:\Geeks\progressbar”

 

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub


‘Codigo Javascript para Imprimir el Progress

Public Sub Imprimir()

Dim sb As New StringBuilder()

sb.Append(“<div id=’updiv’ style=’Font-weight:bold;font-size:11pt;Left:320px;COLOR:black;font-family:verdana;Position:absolute;Top:140px;Text-Align:center;’>”)

sb.Append(“&nbsp;<script> var up_div=document.getElementById(‘updiv’);up_div.innerText=”;</script>”)

sb.Append(“<script language=javascript>”)

sb.Append(“var dts=0; var dtmax=10;”)

sb.Append(“function ShowWait(){var output;output=’Espere mientras se carga el archivo!’;dts++;if(dts>=dtmax)dts=1;”)

sb.Append(“for(var x=0;x < dts; x++){output+=’’;}up_div.innerText=output;up_div.style.color=’red’;}”)

sb.Append(“function StartShowWait(){up_div.style.visibility=’visible’;ShowWait();window.setInterval(‘ShowWait()’,100);}”)sb.Append(“StartShowWait();</script>”)

HttpContext.Current.Response.Write(sb.ToString())

HttpContext.Current.Response.Flush()

End Sub


‘Codigo javascript para borrar el progressbar

Public Sub Clear()

Dim sbc As New StringBuilder()

sbc.Append(“<script language=’javascript’>”)

sbc.Append(“alert(‘Se ha completado correctamente!’);”)

sbc.Append(“up_div.style.visibility=’hidden’;”)

sbc.Append(“history.go(-1)”)

sbc.Append(“</script>”)

HttpContext.Current.Response.Write(sbc)

End Sub

Protected Sub btnUpload_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpload.Click

Dim strFileName As String = System.IO.Path.GetFileName(upUserCtrl.PostedFile.FileName)

Try


If strFileName <> “” Then


‘Imprimir el ProgressBar


Imprimir()

upUserCtrl.PostedFile.SaveAs(strLocation + strFileName)

Thread.Sleep(2000)

Clear()

End If

Catch ex As Exception

Response.Write(ex.Message)

End Try

End Sub

end Class

 

<%@ Page Language=”VB” AutoEventWireup=”true” CodeFile=”Default.aspx.VB” Inherits=”_Default” %>

<%@ Register Src=”Uploader.ascx” TagName=”Uploader” TagPrefix=”uc1″ %>

<!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 id=”Head1″ runat=”server”>

<title>Geeks Bar</title>

</head>

<body>

<form id=”form1″ runat=”server”>

<div>

<uc1:Uploader ID=”Uploader1″ runat=”server” />

</div>

</form>

</body>

</html>

 Espero que le sea de utilidad