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:
Browser Operating System
Internet Explorer 5.0 and later  Windows   
Netscape 8.0 and later  Windows   Macintosh 
Mozilla 1.7.5 and later  Windows   Macintosh 
Firefox 1.0 and later  Windows   Macintosh 
Safari 1.3 and later  Windows   Macintosh 

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">&nbsp;</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;
}