merged both, dynamically append rows

Author: Gaurab Dasgupta

src/webpage/js/tweaks.js

@@ -1,24 +1,43 @@
 
-var fName = null;
-var fData = null;
-var espURL = "http://" + location.host;
+var filename = null;
+var fileData = null;
+var host = location.host;
+var espURL = "http://" + host;
 
 function UploadData()
 {
 	var xhr = new XMLHttpRequest();
-	var url = espUrl + "/upload&"+ fName
-	var params = fData;
+	var url = espUrl + "/upload&"+ filename
+	var params = fileData;
 	xhr.open("POST", url, true);
 	xhr.send(params);
 }
 
 function UploadFile() 
 {
 	UploadData();
-	cancelUpload();
 	setTimeout(fetchFileList, 2000);
 }
 
+var caution = 0;
+function readSingleFile(e) // since in first run above does nothing, and after we upload a file, click is recorded, this function is set in motion.
+{
+	var file = e.target.files[0]; // return the file taht waws uploaded
+	filename = file.name;	
+	if (!file) 
+		{ 
+			caution = 1; 
+		}
+	var reader = new FileReader();
+	reader.onload = function(e) 
+	{
+		fileData = e.target.result;		
+	};
+	reader.readAsText(file);
+	
+	
+}
+
 function fetchFileList() 
 {
 	var xhr = new XMLHttpRequest();
@@ -30,11 +49,11 @@ function fetchFileList()
 	{
 		if(xhr.readyState == 4 && xhr.status == 200) //done & success
 		{
-			showFiles(xhr.responseText);
+			DisplayDirectory(xhr.responseText);
    		} 
    		else 
    		{
-			showFilesError();
+			alert("Failed to connect");
 		}
 	}
 
@@ -44,19 +63,19 @@ function fetchFileList()
 function deleteFile(filename) 
 {
 	var xhr = new XMLHttpRequest();
-	var url = espUrl + "/delete&" + fName;
+	var url = espUrl + "/delete&" + filename;
 
 	xhr.open("GET", url, true);
 	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 	xhr.onreadystatechange = function() 
 	{
 		if(xhr.readyState == 4 && xhr.status == 200) 
 		{
-			showFiles(xhr.responseText);
+			DisplayDirectory(xhr.responseText);
    		} 
    		else 
    		{
-			showFilesError();
+			alert("Failed to connect");
 		}
 	}
 	xhr.send();
@@ -65,30 +84,136 @@ function deleteFile(filename)
 function flashFile(filename) 
 {
 	var xhr = new XMLHttpRequest();
-	var url = espUrl + "/flash&" + fName;
+	var url = espUrl + "/flash&" + filename;
 
 	xhr.open("GET", url, true);
 	xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 	xhr.onreadystatechange = function() 
 	{
 		if(xhr.readyState == 4 && xhr.status == 200) 
 		{
-			showFiles(xhr.responseText);
+			DisplayDirectory(xhr.responseText);
    		}
 	}
 	xhr.send();
 }
 
 
-function stageFile(fName, option) // staging selected file for flash/delete
+
+var checkRow = 0;
+function GenerateRows(filename, filesize)
+{
+	var table = document.getElementById("table");
+    if(checkRow == 0)
+    { 
+    	document.getElementById("table").deleteRow(0);
+    }
+    var row = table.insertRow(checkRow);
+    checkRow = checkRow +1;
+    var cell1 = row.insertCell(0);
+    var cell2 = row.insertCell(1);
+    cell1.innerHTML = filename;
+    cell2.innerHTML = filesize;
+}
+
+
+function DisplayDirectory(requestList)
 {
-	if(option == 1)
+	var listData = requestList.split("\n");
+	if(listData.length == 0)
 	{
-		flashFile(fName);
+		checkRow = 0;
 	}
-	else
+
+	var totalsize = 0;
+	var filecount = 0;
+
+	for(var i = 0; i < listData.length; i++)
 	{
-		deleteFile(fName);
+		if(listData.length < 5)
+		{
+			continue;
+		}
+		filecount++;
+		var elements = listData.split(";");
+		totalsize += parseInt(elements[1]);
+		GenerateRows(elements[0], elements[1]);
 	}
+	var lastRow = filecount - 1;
+	var table1 = document.getElementById("tab");
+	var rowTotal = table1.insertRow(lastRow);
+	var cell3 = rowTotal.insertCell(0);
+	var cell4 = rowTotal.insertCell(1);
+	cell3.innerHTML = "Total Files:" + filecount;
+	cell4.innerHTML = "Total Size:" + totalsize;
 }
 
+/*
+	File Input snippet
+	By Osvaldas Valutis, www.osvaldas.info
+	Available for use under the MIT License
+*/
+
+var inputs = document.querySelectorAll( '.inputfile' );
+Array.prototype.forEach.call( inputs, function( input )
+{
+	var label	 = input.nextElementSibling,
+		labelVal = label.innerHTML;
+
+	input.addEventListener( 'change', function( e )
+	{
+		var fileName = '';
+		if( this.files && this.files.length > 1 )
+			fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
+		else
+			fileName = e.target.value.split( '\\' ).pop();
+
+		if( fileName )
+			label.querySelector( 'span' ).innerHTML = fileName;
+		else
+			label.innerHTML = labelVal;
+	});
+});
+
+
+/*  Function for highlighting row of staged file */
+
+function highlight_row() 
+{
+    var table = document.getElementById('table');
+    var cells = table.getElementsByTagName('td');
+
+    for (var i = 0; i < cells.length; i++) 
+    {
+        // Take each cell
+        var cell = cells[i];
+        // do something on onclick event for cell
+        cell.onclick = function () 
+        {
+            // Get the row id where the cell exists
+            var rowId = this.parentNode.rowIndex;
+
+            var rowsNotSelected = table.getElementsByTagName('tr');
+            for (var row = 0; row < rowsNotSelected.length; row++) 
+            {
+                rowsNotSelected[row].style.backgroundColor = "";
+                rowsNotSelected[row].classList.remove('selected');
+            }
+            var rowSelected = table.getElementsByTagName('tr')[rowId];
+            rowSelected.style.backgroundColor = "#e5a734";
+            rowSelected.className += " selected";
+
+
+            
+        }
+    }
+
+} //end of function
+document.getElementById('file-7').addEventListener('change', readSingleFile, false);
+
+window.onload = highlight_row();
+
+window.onload = function () 
+{ 
+	fetchFileList(); 
+};