Support forums - customizing progress bar

Support forums » Products » Ajax Uploader » Re: customizing progress bar

customizing progress bar

Last post 04-15-2010, 5:57 AM by jainpraveen75. 3 replies.


	Sort Posts: Previous Next

03-16-2010, 3:28 PM 59439

BostonMerlin
Joined on 05-01-2009
Posts 9

customizing progress bar

Reply Quote

I'm able to change the location of the progress bar using ProgressCtrlID and ProgressTextID but unless i'm doing something wrong it appears I cannot show the progress text above the progress bar or within the progress bar. Text is always shown below the bar.

In addition, my designer wants to show the Total file progress such as .. 1 of 4 remaining 2 of 4 remaining etc.

My assumption was that by letting us specifcy the panel to show the progress and the label to show the text they could live anywhere on the page.

Thoughts?

Thanks

John

03-17-2010, 10:08 PM 59461 in reply to 59439

cutechat
Joined on 07-22-2004
Posts 2,332

Re: customizing progress bar

Reply Quote

John,

Please try this code

<%@ Page Language="C#" Title="Total Progress" %>
<%@ Import Namespace="CuteWebUI" %>
<%@ Register TagPrefix="CuteWebUI" Namespace="CuteWebUI" Assembly="CuteWebUI.AjaxUploader" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

void InsertMsg(string msg)
	{
		ListBoxEvents.Items.Insert(0, msg);
		ListBoxEvents.SelectedIndex = 0;
	}
	protected void UploadAttachments1_AttachmentAdded(object sender, AttachmentItemEventArgs args)
	{
		InsertMsg("Added.." + args.Item.FileName);
	}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
</head>
<body>
	<form id="Form1" runat="server">
		<CuteWebUI:UploadAttachments runat="server" ID="UploadAttachments1" OnAttachmentAdded="UploadAttachments1_AttachmentAdded">
		</CuteWebUI:UploadAttachments>
		<div id='progressInfo' style="display:none;font-size:18px;color:DarkRed"></div>
		<br />
		<div>
			Server Trace:
			<br />
			<asp:ListBox runat="server" ID="ListBoxEvents" Width="800"></asp:ListBox>
		</div>
	</form>
	<script type="text/javascript">
	function ToFixed(num) {
		if (num > 100)
			return Math.round(num);
		if (num > 10)
			return num.toFixed(1);
		return num.toFixed(2);
	}
	function FormatSize(bytecount) {
		var str = bytecount + ' B';
		if (Number(bytecount) >= 2048) { str = ToFixed(bytecount / 1024) + ' KB'; }
		if (Number(bytecount) >= 2097152) { str = ToFixed(bytecount / 1048576) + ' MB'; }
		if (Number(bytecount) >= 2147483648) { str = ToFixed(bytecount / 1073741824) + ' GB'; }
		return str;
	}
	
	var progressInfo=document.getElementById("progressInfo");
	var hasStarted=false;
	var startTime=0;
	var fullSize=0;
	var finishSize=0;
	var queueSize=0;
	var filecount=0;
	function CuteWebUI_AjaxUploader_OnStart()
	{
		if(hasStarted)return;
		hasStarted=true;
		startTime=new Date().getTime();
		progressInfo.innerHTML="Start upload";
		progressInfo.style.display="";
	}
	function CuteWebUI_AjaxUploader_OnStop()
	{
		hasStarted=false;
		progressInfo.style.display="none";
	}
	function CuteWebUI_AjaxUploader_OnPostback()
	{
		hasStarted=false;
		progressInfo.style.display="none";
	}
	function CuteWebUI_AjaxUploader_OnQueueUI(list)
	{
		filecount=list.length;
		fullSize=0;
		finishSize=0;
		queueSize=0;
		for(var i=0;i<list.length;i++)
		{
			var size=list[ i ].FileSize;	//or -1 if iframe mode
			var stat=list[ i ].Status;
			fullSize+=size;
			if(stat=="Finish")
				finishSize+=size;
			if(stat=="Queue")
				queueSize+=size;
		}
		return true;
	}
	function CuteWebUI_AjaxUploader_OnProgress(enable,filename,begintime,uploadedsize,totalsize)
	{
		if(fullSize<0)
		{
			progressInfo.innerHTML="Unable to calculate total progress for iframe mode";
			return true;
		}
		
		if(!enable)
			return;
		if(!totalsize)
			return;

var size1=finishSize+uploadedsize;
		var size2=queueSize+totalsize-uploadedsize;
		var size3=size1+size2;
		var seconds=(new Date().getTime()-startTime)/1000;
		var speed=size1/seconds;
		var timeleft=size2/speed;

progressInfo.innerHTML="Uploading "+filecount+" files. "+FormatSize(size1)+" of "+FormatSize(size3)+" at "+FormatSize(Math.round(speed))+"/s; "+Math.round(timeleft)+" seconds remaining ";
		//return false;
	}
	</script>

</body>
</html>

Regards,
Terry

03-18-2010, 10:18 AM 59475 in reply to 59461

BostonMerlin
Joined on 05-01-2009
Posts 9

Re: customizing progress bar

Reply Quote

Thanks, i'll give it a whirl.

John

04-15-2010, 5:57 AM 60130 in reply to 59461

jainpraveen75
Joined on 04-15-2010
Posts 5

Re: customizing progress bar

Reply Quote

This is G8

but my need is the user Manual Uploading and in that case it will not working fine

Filed under: Re: customizing progress bar