Load (functions)

var
Load           = {}
Load.ImageFile = LoadInputFromImageFile
Load.Table     = LoadTableFromFile

Load Image File

Load.ImageFile( targetID, fileID, holderID )

The Load.ImageFile function allows an image selected using a file input form field to be automatically loaded and displayed within the element identified by 'targetID'.

function LoadInputFromImageFile( targetID, fileID, holderID )
{
	var target = document.getElementById( targetID );
	var file   = document.getElementById( fileID  );
	
	if ( target && file )
	{
		file.imageFile = new InputFile( fileID, null, function() { LoadInputFromImageFileHandler( targetID, fileID, holderID ); }, null );
	}
}

function LoadInputFromImageFileHandler( targetID, fileID, holderID )
{
	var target = document.getElementById( targetID  );
	var file   = document.getElementById( fileID   );
	var holder = document.getElementById( holderID );

	var base64 = file.imageFile.reader.resultAsBase64;
	var ext    = file.imageFile.fileType;
	var url64  = "data:image/" + ext + ";base64," + base64;
	
	target.value = url64.replace( '=', '' );

	if ( holder )
	{
		holder.style.background     = "white url(" + url64 + ") no-repeat center center";
		holder.style.backgroundSize = "cover";

		Class.RemoveClass( holder, "hidden" );
	}
}

Load Table

Load.Table( event )

The Load.Table function allows a table to be automatically filled when a CSV file is selected using a file input form field by passing the corresponding 'onchange' event to the function.

function LoadTableFromFile( event )
{
	var table_id = event.target.getAttribute( "data-target-id" );
	var table    = document.getElementById( table_id );
	
	if ( table )
	{
		var id = event.target.id;
		
		LoadTableFromFile.table = table;
		LoadTableFromFile.file  = InputFile( id, null, LoadTableFromFile.OnLoad, null );
	}
}

Helper functions

LoadTableFromFile.OnLoad
=
function()
{
	if ( ! LoadTableFromFile.file )
	{
		console.log( "Unexpectedly, could not find file!" );
	}
	//else
	//if ( "csv" != LoadTableFromFile.file.fileType )
	//{
	//	alert( "Please add a CSV (Comman Seperated Value) file - file of type " + LoadTableFromFile.file.fileType + " selecteed" );
	//
	//	location.reload();
	//}
	else
	{
		var table     = LoadTableFromFile.table;
		var content   = Base64.Decode( LoadTableFromFile.file.reader.resultAsBase64 );
		var csv_file  = new CSVFile( content );
		var col_specs = LoadTableFromFile.ExtractColumnSpecs( LoadTableFromFile.table );
		var tbody     = table.tBodies[0];

		var rows      = csv_file.getNrOfRows();

		if ( 0 < rows )
		{
			tbody.innerHTML = "";
		
			for ( var row=0; row < rows; row++ )
			{
				var tr = document.createElement( "TR" );
				var n  = col_specs.length;
				
				for ( var i=0; i < n; i++ )
				{
					//	Weirdness alert !!!
					//	When assigning from 'value' into 'td.innerHTML' Safari (and possibly other browsers)
					//	will html entity encode characters such as ampersands that are in 'value'.
					//	To ensure that this always happens, 'td.innerHTML' is then passed to the function
					//	'HTMLEntitiesEncode', which will encode any entities that were not automatically
					//	converted by the browser. Note, the fourth parameter of 'HTMLEntitiesEncode' is
					//	false, which prevents already encoded entities from being re-encoded.
					//	Therefore, this kind of makes it impossible to use this Load.Table mechanism
					//	to load values that contain html entities that need to be preserved, i.e.
					//	& should be converted to '&', 'a', 'm', 'p', ';'.

					var spec           = col_specs[i];
					var td             = document.createElement( "TD" );
					var value          = csv_file.getValueFor( row, spec.source_names );
						td.innerHTML   = value;
						td.innerHTML   = HTMLEntitiesEncode( td.innerHTML, 'ENT_QUOTES', 'UTF8', false );
						td.setAttribute( "data-name", spec.field );

					tr.appendChild( td );
				}
			
				tbody.appendChild( tr );
			}
		}
	}
}
LoadTableFromFile.ExtractColumnSpecs
=
function( table )
{
	var col_specs   = new Array();
	var th_elements = table.getElementsByTagName( "TH" );
	var n           = th_elements.length;
	
	for ( var i=0; i < n; i++ )
	{
		var th           = th_elements[i];
		var field        = th.getAttribute( "data-field" );
		var source_names = th.getAttribute( "data-source-names" );

		var col_spec                 = new Object();
			col_spec['field']        = field;
			col_spec['source_names'] = source_names.split( "," );

		col_specs.push( col_spec );
	}
	return col_specs;
}