If you want to modify the behaviour of the web control on the client side or the design of the elements you can do that by altering the client side adapters.
If you would like to redefine all the functions you can then set it by using the server side property UIAdapterJsInstance and assigning the name of your adapter to that property.
If you would like to redefine only a single function or just several functions you can use javascript function templates. For example if you want to change the function fired when the client has no Flash 8 player to show a simple alert message you would use:
<fjx:FileUploader ID="FileUploader1" runat="server" > <Adapters> <fjx:ThumbGeneratorAdapter Runat="server" Extensions="jpg;jpeg" FolderName="UploadFolder" Suffix="_thumb" MaximumWidth="200" MaximumHeight="200" /> </Adapters> <NoFlashJsFunction><![CDATA[ function(){ alert("Please update flash player"); } ]]></NoFlashJsFunction> </fjx:FileUploader>
You can also redefine:
| Details | Default Content | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Web control tag name: BrowseButtonChangeJsFunction JavaScript function: browseButtonChangeFunc Description: Invoked when the browse button is enabled or disabled |
/*
* Arguments:
* [0] btn - browse button
* [1] enable - indicates whether the button should be active or not
*/
function(btn, enable){
if(!btn){ return; }
btn.firstChild.disabled = !enable;
}
|
||||||||||||||||||
|
Web control tag name: UploadButtonChangeJsFunction JavaScript function: uploadButtonChangeFunc Description: Invoked when the upload button is enabled or disabled |
/*
* Arguments:
* [0] btn - upload button
* [1] enable - indicates whether the button should be active or not
*/
function(btn, enable){
if(!btn){ return; }
btn.firstChild.disabled = !enable;
}
|
||||||||||||||||||
|
Web control tag name: CancelButtonChangeJsFunction JavaScript function: cancelButtonChangeFunc Description: Invoked when the cancel button is enabled or disabled |
/*
* Arguments:
* [0] btn - cancel button
* [1] enable - indicates whether the button should be active or not
*/
function(btn, enable){
if(!btn){ return; }
btn.style.display = (enable)?"inline":"none";
}
|
||||||||||||||||||
|
Web control tag name: FileListInitTraverseJsFunction JavaScript function: fileListInitTraverseFunc Description: Invoked when the list of files is changed |
/*
* Arguments:
* [0] box - the DIV containing th list of files
* [1] files - array of file objects with properties
* - name - Filename
* - status - file status, for example Flajaxian.File_Uploaded
* - bytes - file size in bytes
* [2] currPerc - current percentage DIV
*/
function(box, files, currPerc){
box.innerHTML = "";
box.style.display = "none";
}
|
||||||||||||||||||
|
Web control tag name: FileListTraverseJsFunction JavaScript function: fileListTraverseFunc Description: Invoked when the list of files is changed once for each file |
/*
* Arguments:
* [0] box - the DIV containing th list of files
* [1] file - object with properties
* - name - Filename
* - status - file status, for example Flajaxian.File_Uploaded
* - bytes - file size in bytes
* [2] index - the index of the current file
*/
function(box, file, index){
var div = document.createElement( 'div' );
div.id = box.id + index;
var suffix = "";
switch(file.status){
case Flajaxian.File_Uploading:
div.className = this.getFlashName()+"_UploadingFile";
break;
case Flajaxian.File_Uploaded:
div.className = this.getFlashName()+"_UploadedFile";
break;
case Flajaxian.File_Error:
div.className = this.getFlashName()+"_ErrorFile";
suffix = this.getErrorSuffix();
break;
case Flajaxian.File_Cancelled:
div.className = this.getFlashName()+"_ErrorFile";
suffix = this.getCancelledSuffix();
break;
default:
div.className = this.getFlashName()+"_PendingFile";
break;
}
if(file.status == Flajaxian.File_Selected || file.status == Flajaxian.File_Uploading){
div.innerHTML += " <a class='"+
this.getFlashName()+"_CloseButton' href='javascript:window."+
this.getFlashName()+".cancelOne("+index+
");void(0);'><img style='vertical-align:middle' border='0' src='"+
this.getCloseButtonImageUrl()+"' /></a>";
}
var title = document.createElement( 'span' );
title.innerHTML = file.name + suffix;
div.appendChild(title);
box.style.display = "block";
box.appendChild(div);
}
|
||||||||||||||||||
|
Web control tag name: ProgressBarChangeJsFunction JavaScript function: progressBarChangeFunc Description: Invoked when the percentage loaded data is changed |
/*
* Arguments:
* [0] bar - the DIV for the progress bar
* [1] percDiv - current percentage indicator DIV
* [2] percentage - percentage
* [3] progress - current upload progress, a value from 0 to 1
* [4] loadedBytes - bytes loaded for all the files in the queue
* [5] currentFileLoadedBytes - bytes loaded for the current file
*/
function(bar, percDiv, percentage, progress, loadedBytes, currentFileLoadedBytes){
if(!!bar){
bar.style.width =
((progress == 0 || progress == 1) ? 0 : (progress * this.getProgressBarWidth()))+"px";
}
if(!!percDiv){
percDiv.innerHTML = (progress == 0 || progress == 1) ? "":(percentage + "%");
}
}
|
||||||||||||||||||
|
Web control tag name: NoFlashJsFunction JavaScript function: noFlashFunc Description: Invoked when the user does not have Flash 8 player installed. NoFlashMessage is property of the web control. |
function(){
if(confirm(this.getNoFlashMessage())){
document.location.href='http://www.adobe.com/go/gntray_dl_getflashplayer';
}
}
|
||||||||||||||||||
|
Web control tag name: NoCompatibleBrowserFunctionText JavaScript function: noCompatibleBrowserFunc Description: Invoked when the user does not have a browser that supports Flash ExternalInterface. NoCompatibleBrowserMessage is property of the web control. Browsers supporting ExternalInterface are:
|
function(){
if(confirm(this.getNoCompatibleBrowserMessage())){
document.location.href='http://www.mozilla.com/firefox/';
}
}
|
||||||||||||||||||
|
Web control tag name: NoFlashFileWasFoundFunction JavaScript function: noFlashFileWasFoundFunc Description: Invoked when the flash file cannot be found, for example if the control is wrapped inside an HTML element with style.display="none". NoFlashFileWasFoundMessage is property of the web control. |
function(){
alert(this.getNoFlashFileWasFound());
}
|
||||||||||||||||||
|
Web control tag name: MaxFileSizeReachedFunction JavaScript function: maxFileSizeReachedFunc Description: Invoked when the user has chosen a files that exceed the maximum number of bytes for a file (MaxFileSize property) or the entire queue (MaxFileQueueSize property). MaxFileSizeReachedMessage and MaxFileQueueSizeReachedMessage are properties of the web control. |
/*
* Arguments:
* [0] file - boolean - maximum file size has been reached
* [1] queue - boolean - maximum file queue size has been reached
*/
maxFileSizeReachedFunc: function(file, queue){
var msg = "";
if(file){ msg = this.getMaxFileSizeReachedMessage(); }
if(queue){ msg += this.getMaxFileQueueSizeReachedMessage(); }
if(msg != ""){ alert(msg); }
}
|
||||||||||||||||||
You can also redefine the HTML template. This is the default content of the template:
<fjx:FileUploader ID="FileUploader1" runat="server" > <Adapters> <fjx:ThumbGeneratorAdapter Runat="server" Extensions="jpg;jpeg" FolderName="UploadFolder" Suffix="_thumb" MaximumWidth="200" MaximumHeight="200" /> </Adapters> <HtmlTemplate> <a id="[:BrowseButton_ClientID:]" href="javascript:void(0)"><input type="button" value="[:WordBrowse:]..." /></a> <a id="[:UploadButton_ClientID:]" href="javascript:void(0)"><input type="button" value="[:WordUpload:]" disabled="true" /></a> <div id="[:ProgressBarBorder_ClientID:]"> <div id="[:ProgressBar_ClientID:]"></div> </div> <div id="[:CurrentPercentage_ClientID:]"></div> <div style="float:left"> <a id="[:CancelButton_ClientID:]" href="javascript:void(0)" style="display:none"> <input type="button" value="[:WordCancel:]"/> </a> </div> <div style="height:24px"> </div> <div id="[:FileListBox_ClientID:]"></div> <div style="height:0px;width:0px"> [:FlashTags:] </div> </HtmlTemplate> </fjx:FileUploader>
Inside the template you can use the following variables:
| Variable | Description |
|---|---|
| [:BrowseButton_ClientID:] | The client ID of the browse button. This value is important for the CSS. |
| [:UploadButton_ClientID:] | The client ID of the upload button. This value is important for the CSS. |
| [:CancelButton_ClientID:] | The client ID of the cancel button. This value is important for the CSS. |
| [:ProgressBarBorder_ClientID:] | The client ID of the brogress bar border. This value is important for the CSS. |
| [:ProgressBar_ClientID:] | The client ID of the brogress bar. This value is important for the CSS. |
| [:CurrentPercentage_ClientID:] | The client ID of the element showing current percentage of bytes loaded. This value is important for the CSS. |
| [:FileListBox_ClientID:] | The client ID of the file list box. This value is important for the CSS. |
| [:FlashTags:] | Flash object definition tags |
| [:WordBrowse:] | The word "Browse" comes from the property of the web control WordBrowse |
| [:WordUpload:] | The word "Upload" comes from the property of the web control WordUpload |
| [:WordCancel:] | The word "Cancel" comes from the property of the web control WordCancel |
You can also change the default CSS, by using the property of the web control ExternalCss to assign it to custom external CSS file. If using the default CSS the values for the colors and sizes of the elements can be changed by the web control properties BgColorUploadingFile, ColorUploadedFile, BgColorErrorFile, ColorProgressBarBorder, BgColorProgressBar, FileListWidth, FileListRowHeight, FileListRowWidth, FontFamily, FontSize, ProgressBarWidth, ProgressBarHeight. The default CSS is the following (<ClientID> is the client ID of the web control):
.<ClientID>_UploadingFile{ background-color:#FFFF9A; } .<ClientID>_UploadedFile{ color:#C9C9C9; } .<ClientID>_ErrorFile{ background-color:#FF9A9A; } .<ClientID>_PendingFile{ } .<ClientID>_CloseButton{ float:right; } #<ClientID>{ font-family:Arial; font-size:12px; } #<ClientID>_FileListBox{ width:300px; display:none; } #<ClientID>_FileListBox DIV{ width:300px; height:15px; clear: both; } #<ClientID>_CurrentPercentage{ float:left; margin-right:5px; } #<ClientID>_BrowseButton{ float:left; margin-right:5px; margin-top:-1px; } #<ClientID>_UploadButton{ float:left; margin-right:5px; margin-top:-1px; } #<ClientID>_CancelButton{ float:left; margin-right:5px; margin-top:-1px; } #<ClientID>_ProgressBarBorder{ width:100px; height:20px; border: solid 1px #9E9E9E; float:left; margin-right:5px; } #<ClientID>_ProgressBar{ width:0px; height:20px; background-color:#CECECE; float:left; }