RKRIMEN / CatalystX-Example-YUIUploader-0.02 / root / static / advanced.html 
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Uploader With DataTable Example</title>

<!-- Required YUI files -->
<link rel="stylesheet" type="text/css" href="/static/js/yui/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="/static/js/yui/build/datatable/assets/skins/sam/datatable.css" />
<script type="text/javascript" src="/static/js/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/static/js/yui/build/element/element-beta.js"></script>

<!-- Required JSON files -->
<script type="text/javascript" src="/static/js/yui/build/json/json-beta.js"></script>

<!-- Required Datasource and Datatable files -->
<script type="text/javascript" src="/static/js/yui/build/datasource/datasource-beta.js"></script>
<script type="text/javascript" src="/static/js/yui/build/datatable/datatable-beta.js"></script>

<!-- Main Uploader script -->
<script type="text/javascript" src="/static/js/yui/build/uploader/uploader-experimental.js"></script>

<!-- Logger CSS and JS --> 
<link type="text/css" rel="stylesheet" href="/static/js/yui/build/logger/assets/skins/sam/logger.css"> 
<script type="text/javascript" src="/static/js/yui/build/logger/logger-min.js"></script>
</head>

<body class=" yui-skin-sam">

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<h1>Uploader With DataTable Example</h1>

<div id="toBeReplaced" style="width:400px;height:210px">Unable to load Flash content. You can download the latest version of Flash Player from the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player Download Center</a>.</p></div>
<input id="browseBtn" name="browse" value="Browse for Images" onclick="browse()" type="button" />
<input id="uploadBtn" name="upload" value="Upload Selected" onclick="upload()" type="button" />
<br/>
<div id="single" style="margin-top:2em;"></div>

<script type="text/javascript">

	this.myLogReader = new YAHOO.widget.LogReader();
	
	YAHOO.widget.Uploader.SWFURL = "/static/js/yui/build/uploader/assets/uploader.swf";
	
	var uploader = new YAHOO.widget.Uploader( "toBeReplaced" );
	uploader.addListener('fileSelect',onFileSelect);
	uploader.addListener('uploadError',onUploadError);
	uploader.addListener('uploadComplete',onUploadComplete);
	uploader.addListener('uploadProgress',onUploadProgress);
	uploader.addListener('uploadStart',onUploadStart);
	var uploadCounter = 0;
	var fileIdHash;
	var dataArr;

	function browse() {
		uploader.clearFileList();
		uploader.browse(true, [{description:"Images", extensions:"*.jpg;*.png;*.gif"}]);
	}
	
	function createDataTable(entries) {
		rowCounter = 0;
		fileIdHash = [];
		dataArr = [];
		for(var i in entries) {
			var entry = entries[i];
			dataObj = {};

			for (var j in entry) {
				dataObj[j] = entry[j];
			}
			dataArr.push(dataObj);
			fileIdHash[dataObj["id"]] = rowCounter;
			rowCounter++;
		}
		
		this.allData = {data: dataArr}

        var myColumnDefs = [
            {key:"name", label: "File Name", sortable:false},
			{key:"size", label: "Size", sortable:false},
			{key:"progress", label: "Upload progress", sortable:false}
        ];
        this.myDataSource = new YAHOO.util.DataSource(this.allData);
		this.myDataSource.dataType = YAHOO.util.DataSource.TYPE_JSARRAY;
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        this.myDataSource.responseSchema = {
            resultsList: ["data"],
            fields: ["id","name","created","modified","type", "size", "progress"]
        };
		
	    this.singleSelectDataTable = new YAHOO.widget.DataTable("single",
	            myColumnDefs, this.myDataSource, {
	                caption:"Files To Upload",
	                selectionMode:"single"
	            });
	
	}
	
	function upload() {
		YAHOO.log(dataArr);
		var idToUpload = dataArr[uploadCounter]["id"];
		uploader.upload(idToUpload, 'http://localhost:3000/upload');
		document.getElementById('uploadBtn').disabled = true;
	}
	
	function onUploadProgress(event) {
		rowNum = fileIdHash[event["id"]];
		prog = Math.round(100*(event["bytesLoaded"]/event["bytesTotal"]));
		progbar = "<hr style=\"color: #f00; background-color: #f00; text-align:left; margin: 0 auto 0 0; height: 5px; width: " + prog + "px\"/>";
		singleSelectDataTable.updateRow(rowNum, {name: dataArr[rowNum]["name"], size: dataArr[rowNum]["size"], progress: progbar});
		
	}
	

	function onFileSelect(event) {
		fileList = event.fileList;
		YAHOO.log(event);
		createDataTable(fileList);

	}
	
	function onUploadStart(event) {
		YAHOO.log(event);
		rowNum = fileIdHash[event["id"]];
		singleSelectDataTable.updateRow(rowNum, {name: dataArr[rowNum]["name"], size: dataArr[rowNum]["size"], progress: "Starting..."});		
	}
	
	function onUploadComplete(event) {
		YAHOO.log(event);
		rowNum = fileIdHash[event["id"]];
		progbar = "<hr style=\"color: #f00; background-color: #f00; text-align:left; margin: 0 auto 0 0; height: 5px; width: 100px\"/>";
		singleSelectDataTable.updateRow(rowNum, {name: dataArr[rowNum]["name"], size: dataArr[rowNum]["size"], progress: progbar});
		
		if (uploadCounter < dataArr.length - 1) {
			uploadCounter++;
			upload();
		}
		else {
			YAHOO.log("All files uploaded!");
		}
	}
	
	function onUploadError (event) {
		YAHOO.log(event);
	}

</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>