This demo shows the different styles of progress monitors applicable to the File Uploader.

This is made possible by leveraging ZK client side programming mechanisms, such as extending a ZK Object (JavaScript objects). Please refer to UPMSamples.js for more details.

<zk xmlns:c="client">
	<style src="/widgets/effects/upload_effect/customize.css" />
	<script src="/widgets/effects/upload_effect/UPMSamples.js" />
	<panel width="550px" border="normal">
		<caption label="ZK Mail Sender">
			<div sclass="buttons">
				<button label="Send" iconSclass="z-icon-send-o" onClick='alert("Sent!")' />
				<button label="Draft" iconSclass="z-icon-save"/>
				<button label="Discard" iconSclass="z-icon-trash-o"/>
			</div>
		</caption>
		<toolbar  hflex="1">
			<vlayout hflex="1" spacing="6px">
				<hlayout valign="middle">
					<label sclass="name" value="To : " />
					<textbox value="info@zkoss.org" hflex="1" />
				</hlayout>
				<hlayout valign="middle">
					<label sclass="name" value="CC : " />
					<textbox value="myDearBoss@yourCompany.com"  hflex="1" />
				</hlayout>
				<hlayout valign="middle">
					<label sclass="name" value="Subject : " />
					<textbox value="Kindly View The Attachment"  hflex="1" />
					<button width="85px" id="attachBtn" sclass="attachBtn"
							iconSclass="z-icon-paperclip"
							upload="true,maxsize=1024" label="Attach" onUpload="addItem()"/>
				</hlayout>
				<label value="Accepts doc, docx, xls, xlsx, pdf"/>
				<label value="Max size 1mb"/>
				<vlayout id="flist" hflex="1" sclass="fileList" />
			</vlayout>
		</toolbar>
		<panelchildren>
			<div sclass="input-area">
				<textbox multiline="true" rows="10" width="100%" >
					<attribute name="value"><![CDATA[
Hi,
	I am writing to confirm you about the budget of annual meeting.
	Please view the detail as attachment below.

BR]]></attribute>
				</textbox>
			</div>
		</panelchildren>
		<toolbar sclass="footer">
			<div id="footer"></div>
		</toolbar>
	</panel>
	<zscript><![CDATA[
	void addItem() {
		org.zkoss.util.media.Media media = event.getMedia();
		List supportedFormats = new ArrayList();
		supportedFormats.add("doc");
		supportedFormats.add("docx");
		supportedFormats.add("xls");
		supportedFormats.add("xlsx");
		supportedFormats.add("pdf");
		/* check if for matching file extension*/
		if (-1 == supportedFormats.indexOf(media.getFormat())) {
			Clients.showNotification("Please upload a doc, docx, xls, xlsx or pdf file");
			return;
		}
		Hlayout hl = new Hlayout();
		hl.setSpacing("6px");
		hl.setClass("newFile");
		hl.appendChild(new Label(media.getName()));
		A rm = new A("remove");
		rm.addEventListener(Events.ON_CLICK,new org.zkoss.zk.ui.event.EventListener(){
			public void onEvent(Event event) throws Exception {
				hl.detach();
			}
		});
		hl.appendChild(rm);
		flist.appendChild(hl);
	}
	]]></zscript>
</zk>

<zk xmlns:c="client">
	<script><![CDATA[
	function testUpload(viewer) {
		for (var i = 0 ; i < 5; i ++ ) {
			(function() {
				var fakeLoader = { id: 'tmp' + new Date().getTime() + i},
						muv = viewer == 1 ?
						new zk.UPMSample1(fakeLoader, "TempFile" + parseInt((Math.random() + 1)*10) ):
						new zk.UPMSample2(fakeLoader, "TempFile" + parseInt((Math.random() + 1)*10) ),
					fsize = 12345678*Math.random() + 1;
				muv.pct = 0;
				var pgs = setInterval(function() {
					muv.pct += parseInt(Math.random()*19);
					
					if (muv.pct >= 100) {
						clearInterval(pgs);
						muv.pct = 100;
					}
					muv.update(muv.pct, fsize);
					if (muv.pct == 100)
						muv.destroy();
				}, 678);
			})();
		}
	}
	]]></script>
	<groupbox sclass="z-demo-config" closable="false" hflex="min">
		<caption label="Display Custom Progress Example" hflex="min"/>
		<vlayout>
			<hlayout valign="middle">
				 Style 1 :
				<button label="Show" c:onClick='testUpload(1)' />
			</hlayout>
			<hlayout valign="middle">
				Style 2 :
				<button label="Show" c:onClick='testUpload(2)' />
			</hlayout>
		</vlayout>
	</groupbox>
	<separator height="15px"/>
	<groupbox sclass="z-demo-config" closable="false" hflex="min">
		<caption label="Select Custom Style of File Uploader" hflex="min"/>
		<radiogroup id="selectViewer">
			<attribute name="onCheck"><![CDATA[
				attachBtn.setUpload(self.getSelectedItem().getValue());
			]]></attribute>
			<vlayout>
				<radio label="Default Style" value="true,maxsize=10240" checked="true" />
				<radio label="Style 1" value="zk.UPMSample1,maxsize=10240" />
				<radio label="Style 2" value="zk.UPMSample2,maxsize=10240" />
				<label style="font-weight:bold" value='Upload files by "Attach" button' />
			</vlayout>
		</radiogroup>
	</groupbox>
</zk>

/*****Panel Customize*****/
.demo-layout-content .z-caption-content {
	padding-left: 5px;
	font-weight: bold;
	width: 100%;
	position: relative;
}
.demo-layout-content .z-caption-content .buttons {
    position: absolute;
    right: 0px;
    top: 0px;
}
.z-panel-body {
	padding: 5px 0px;
}
.z-panel-body .z-toolbar {
	border: none;
}
.z-panel-noborder .z-panel-bottom div.footer {
	padding: 2px 0;
	border-left: 0 none;
	border-right: 0 none;
}

/*****Text Style*****/
span.name {
	font-size: 12px;
	display: block;
	width: 52px;
	text-align: right;
	font-weight: bold;
}
.attachBtn {
	font-weight: bold;
	color: #F25D45;
}

.iceblue_c .attachBtn {
	color: #FFF;
	background-color: #d0021b;
}

.newFile {
	padding-left: 10px;
}

/*****Attach Field*****/
.z-toolbar {
	background: none;
}
.z-toolbar .fileList a{
	border: 0 none;
	text-decoration: underline;
	background: none;
}

/*****Input Field*****/
.input-area {
	margin: 0 3px;
	border-top: 1px solid #ECECEC;
}

.footer .z-toolbar-content{
	width: 100%;
}

/*****UPMSample1*****/
.UPMSample1 .msg span {
	height: 15px;
	padding-left:10px;
	font-size:12px;
}
.UPMSample1 .z-progressmeter {
	width: 100px;
	height: 10px;
}

/*****UPMSample2*****/
.UPMSample2 {
	background:#F4F8FF;
	border-top: 1px solid #99AABD;
	border-bottom: 1px solid #99AABD;
	font-family: tahoma,helvetica,arial,sans-serif;
	font-size: 11px;
	padding: 3px;
	color: #0F3B82;
}
.UPMSample2 a {
	color: #0366AC;
	font-weight: bold;
	cursor: pointer;
}
.UPMSample2 .float-left {
	float: left;
}
.UPMSample2 .float-right {
	float: right;
}
.UPMSample2 .clear {
	clear: both;
}

zk.afterMount(function() {
	//Upload Progress Monitor Sample 1
	zk.UPMSample1 = zk.$extends(zk.Object, {
		updated : null,
		$init : function(uplder, filenm) {
			this._uplder = uplder;
			var id = uplder.id;
			//Add message and progressmeter
			zk.Widget.$(jq("$flist")).appendChild(
				new zul.box.Hlayout({
					id: id + "_layout",
					spacing: "6px",
					sclass: "UPMSample1",
					children: [
					    new zul.wgt.Html({
					        content: ['<div class="msg"><span>', filenm,'</span></div>'].join("")
						}),
					    new zul.wgt.Progressmeter({
						  id: id + "_pgs"
					})]
				})	
			);
		},
		update : function(sent, total) {
			zk.Widget.$(jq('$' + this._uplder.id + '_pgs')).setValue(sent);
		},
		destroy : function() {
			var layout = jq('$' + this._uplder.id + "_layout");
			if (zk.ie) {
				zk.Widget.$(layout).detach();
			} else {
				layout.animate({ width: 1}, 500, function() {
					zk.Widget.$(layout).detach();
				});
			}
		}
	});
	
	//Upload Progress Monitor Sample 2
	zk.UPMSample2 = zk.$extends(zk.Object, {
		updated : null,
		$init : function(uplder, filenm) {
			this._uplder = uplder;
			var id = uplder.id, 
				uri = '../widgets/effects/upload_effect/img/upload-loader.gif', 
				html = ['<div id="', id,'" class="UPMSample2">',
				        '<image class="float-left" src="' , uri, '"/>',
				        '<div class="float-left">&nbsp;&nbsp;&nbsp;FileName: ', filenm , '</div>',
				        '<div class="float-right">', msgzk.FILE_SIZE, 
				        '<span id="' , id, '-sent">0</span> of ',
				        '<span id="' , id, '-total">0</span>',
				        '<span id="' , id, '-percent"> (0%)</span>',
				        '</div><div class="clear"></div></div>'].join("");
			jq("$footer").append(html);
			this.viewer = jq('#' + id)[0];			
		},
		update : function(sent, total) {
			jq('#' + this._uplder.id + '-sent').html(Math.round((total / 1024) * sent / 100) + msgzk.KBYTES);
			if (!this.updated) {
				this.updated = true;
				jq('#' + this._uplder.id + '-total').html(Math.round(total / 1024) + msgzk.KBYTES);
			}
			jq('#' + this._uplder.id + '-percent').html(" (" +sent + "%" + ")");
		},
		destroy : function() {
			jq(this.viewer).slideUp(1000);
		}
	});
});