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;
}