Mitch,
Instead of loading the files in Cache database you can leave them
outside
of Cache and manipulate them with their names(paths) instead of OIDs.
Here are two examples which demonstrate this and are more closer
to what you want.They are made for images but the same way you can
use them for any files:
=======================================
Class VICS.EmployeeDemo Extends (%Persistent, %ZEN.DataModel.Adaptor)
{
Property FName As %String [ Required ];
Property LName As %String [ Required ];
Property FileName As %String(MAXLEN = 200);
}
========================================
Class VICS.EmployeePhotoDemo Extends %
ZEN.Component.page
{
/// Class Name of application this page belongs to.
Parameter APPLICATION;
/// Displayed Name of this page.
Parameter PAGENAME;
/// Domain used for localization.
Parameter DOMAIN;
XData Style
{
<style type="text/css">
body {
font-family: verdana;
background:#C0C0C0;
}
#table {
width: 700px;
border: 1px solid darkblue;
}
#myForm {
width: 700px;
border: 1px solid black;
background: #404040;
background-image: url(/csp/broker/images/grad-gray-10x500.png);
background-repeat: repeat-x;
<page xmlns="
http://www.intersystems.com/zen" title="Employee Photo
Demo">
<dataController id="source" modelClass="VICS.EmployeeDemo" modelId=""/
>
<vgroup align="center"> <spacer height="10"/>
<tableNavigatorBar showPageSize="true" id="ListBoxNav"
tablePaneId="table"/>
<spacer height="10"/>
<tablePane id="table" maxRows="200" pageSize="5"
caption="Photo Demo"
tableName="VICS.EmployeeDemo"
useSnapshot="true"
showFilters="true"
showZebra="true"
valueColumn="ID"
useKeys="true"
extraColumnWidth="3%"
onselectrow="zenPage.rowSelected(zenThis,which);">
<column colName="ID" width="10%" />
<column colName="FName" header="First Name" width="20%"
filterType="text"/>
<column colName="LName" header="Last Name" width="20%"
filterType="text"/>
<column colName="FileName" header="Photo File Name" width="47%"/>
</tablePane> <spacer height="25"/>
<form id="myForm" controllerId="source" layout="vertical">
<hgroup><spacer width="50px"/>
<vgroup>
<text label="First Name" id="FName" name="FName" dataBinding="FName"
required="true"/>
<text label="Last Name" id="LName" name="LName" dataBinding="LName"
required="true" />
</vgroup><spacer width="50px"/>
<vgroup><spacer height="10px"/>
<image id="image" name="iframe" height="260px" width="360px"
align="left"/>
</vgroup>
</hgroup>
<hgroup> <spacer width="55px"/>
<!-- demonstrate how to use the file selection dialog -->
<fieldSet legend="File Selection" labelPosition="left">
<text label="Photo File Name:" id="FileName" name="FileName"
dataBinding="FileName" size="60"/>
<text id="wildcard" label="File type wildcard:" value="*"/>
<checkbox id="showdirectoryonly" label="Show directories only:"/>
<button caption="Browse..." onclick="zenPage.showFileSelectionWindow
();"/>
</fieldSet>
</hgroup> <spacer height="10px"/>
<hgroup> <spacer width="255px"/>
<button caption="New" onclick="zenPage.newItem();" />
<spacer width="10px"/>
<button caption="Save" onclick="zenPage.saveItem();" />
<spacer width="10px"/>
<button caption="Cancel" onclick="zenPage.cancel();" />
<spacer width="10px"/>
<button caption="Delete" onclick="zenPage.deleteItem();" />
</hgroup>
</form>
<spacer height="25"/>
<hgroup>
<spacer width="100"/>
</hgroup>
</vgroup>
</page>
}
/// Row in Master table select; update controller.
/// <var>which</var> indicates how this event was fired.
Method rowSelected(table, which) [ Language = javascript ]
{
if ('keypress' == which) {
// defer this action in case the user is arrowing through a number
of items
var id = table.getValue();
var action = new Function("zenPage.getComponentById
('source').setProperty('modelId','"+id+"');");
zenSetDeferredAction(action,200);
}
else {
// select immediately
var id = table.getValue();
zen('source').setProperty('modelId',id);
this.showPhoto();
}
}
Method showPhoto() [ Language = javascript ]
{
var filename=zen('FileName').getValue();
var image=zen('image');
if (filename==undefined || filename==""){image.setProperty
('src','about:blank');}
else image.setProperty('src','csp/broker/photos/'+filename);
}
Method newItem() [ Language = javascript ]
{
zen('image').setProperty('src','about:blank');
zen('table').selectRow(-1);
zen('source').createNewObject();
}
/// save form to database
Method saveItem() [ Language = javascript ]
{
zen("myForm").save();
zen('table').executeQuery();
}
/// cancel the current action
Method cancel() [ Language = javascript ]
{
zen('myForm').reset();
zen('table').selectRow(-1);
zen('source').setProperty('modelId','');
zen('image').setProperty('src','csp/broker/images/einstein.jpg');
//zen('image').setProperty('src','about:blank');
}
/// Delete current item from database
Method deleteItem() [ Language = javascript ]
{
var controller = zen('source');
var id = controller.getModelId();
if ('' == id) {
alert('Nothing is selected from the Table!');
}
else if (confirm('Are you sure?')){
controller.deleteId(id);
zen('myForm').reset();
zen('table').executeQuery();
}
}
/// Demonstration of launching a file selector window.
Method showFileSelectionWindow() [ Language = javascript ]
{
var dir = zenPage.getComponentById("FileName").getValue();
var wildcard = zenPage.getComponentById("wildcard").getValue();
var showdirectoryonly = zenPage.getComponentById
("showdirectoryonly").getValue();
var url = "%ZEN.Dialog.fileSelect.cls?dir=" + cspEncodeUTF8(dir) +
"&wildcard=" + wildcard;
if (showdirectoryonly) url = url +"&showdirectoryonly=1";
zenLaunchPopupWindow
(url,'FileSelection','status,scrollbars,resizable,width=500,height=700');
}
/// Returning from file select dialog and setting the value into the
FileName field
Method onPopupAction(popupName, action, value) [ Language =
javascript ]
{
if (action == "ok") {
var filename = value
var pos=filename.lastIndexOf('\\');
var filename=filename.substring(pos+1,filename.length);
var controller = zen('source');
controller.setDataByName('FileName',filename)
zen('FileName').setValue(filename);
this.showPhoto();
}
}
}
====================================
Class VICS.EmployeePhotoDemoPR Extends %
ZEN.Component.page
{
/// Class Name of application this page belongs to.
Parameter APPLICATION;
/// Displayed Name of this page.
Parameter PAGENAME;
/// Domain used for localization.
Parameter DOMAIN;
Property Link As %Boolean [ InitialExpression = 0 ];
XData Style
{
<style type="text/css">
body {
font-family: verdana;
background:#C0C0C0;
}
#table {
width: 700px;
border: 1px solid darkblue;
<page xmlns="
http://www.intersystems.com/zen" title="Employee Photo
Demo">
<dataController id="source" modelClass="VICS.EmployeeDemo" modelId=""/
>
<vgroup align="center"> <spacer height="10"/>
<tableNavigatorBar showPageSize="true" id="ListBoxNav"
tablePaneId="table"/>
<spacer height="10"/>
<tablePane id="table" maxRows="200" pageSize="10"
caption="Photo Demo"
tableName="VICS.EmployeeDemo"
useSnapshot="true"
showFilters="true"
showZebra="true"
valueColumn="ID"
useKeys="true"
extraColumnWidth="3%"
onselectrow="zenPage.rowSelected(zenThis,which);">
<column colName="ID" width="10%" />
<column colName="FName" header="First Name" width="20%"
filterType="text"/>
<column colName="LName" header="Last Name" width="20%"
filterType="text"/>
<column colName="FileName" header="Photo File Name" width="27%"
hidden="true"/>
<column link="" onclick="zenPage.showFile('#(%query.FileName)#')"
linkCaption="Show file"/>
</tablePane>
<image id="iframe" name="iframe" height="260px" width="360px"
align="left"/>
</vgroup>
</page>
}
/// Row in Master table select; update controller.
/// <var>which</var> indicates how this event was fired.
Method rowSelected(table, which) [ Language = javascript ]
{
if (this.Link==true) {
this.Link=false;
return;
}
else {
this.Link=false
if ('keypress' == which) {
// defer this action in case the user is arrowing through a number
of items
var id = table.getValue();
var action = new Function("zenPage.getComponentById
('source').setProperty('modelId','"+id+"');");
zenSetDeferredAction(action,200);
}
else {
// select immediately
var id = table.getValue();
zen('source').setProperty('modelId',id);
}
}
}
Method showFile(filename) [ Language = javascript ]
{
this.Link=true;
var iframe=zen('iframe');
if (filename==undefined || filename==""){iframe.setProperty
('src','about:blank');}
else iframe.setProperty('src','csp/broker/photos/'+filename);
> ...
>
> read more »