Home     Products      Support      Corporate     Sign In 
Support Knowledge Base, Article 1259
How to create a custom progress indicator using the TransferProgress event of the XFRequest object in JavaScript
XFile comes with a visual progress object (the AXFFileProgress object). But it is also possible to create your own HTML progress window by using the TransferProgress event of the XFRequest object.
In order to use the TransferProgress event of the XFRequest object in JavaScript, first we need to implement an event handler for this event, as shown in the code snippet below:
// Implement the TransferProgress event handler
function TransferProgressEventHandler( BytesTransfered, BytesTransferedThisFile,
TotalBytes, TotalBytesThisFile, currentFileName, bCancel, CurrentURL)
    // Get transfer percentage for the current file	
    if(TotalBytesThisFile > 0)
       strPerc_1 = Math.round(100 * (BytesTransferedThisFile /
 TotalBytesThisFile)) + "%";
       strPerc_1 = "100%";
    // Get transfer percentage for the entire transfer
    strPerc_2 = Math.round(100 * (BytesTransfered / TotalBytes)) +"%";
    // Dynamically write HTML to the progress window
    astr ="<HTML><HEAD><TITLE>" + "Transfer Status" + "</TITLE>";
    astr = astr + "</HEAD><BODY>";
    astr = astr + "<script language=\"javascript\">";
    // focus the transfer window
    astr = astr + "window.focus(); " ;  
    astr = astr + "<\/script>";
    astr = astr + "<Font face='Arial narrow' size='-1'>";      	 
    astr = astr + "<Table>";
    astr = astr + "<TR><TD>Current Filename:</TD><TD>" + 
currentFileName + "</TD></TR>";
    astr = astr + "<TR><TD>Current Url:</TD><TD>" + 
CurrentURL + "</TD></TR>";	
    astr = astr + "<TR><TD>Bytes Transfered:</TD><TD>"+ 
BytesTransferedThisFile + " of " + TotalBytesThisFile + "</TD></TR>";
    astr = astr + "<TR><TD><b>% Transfered:</b></TD><TD>" + 
strPerc_1 + "</TD></TR>";
    astr = astr + "<TR><td> </TD><td> </TD></TR>";
    astr = astr + "<TR><TD>Total Bytes Transfered:</TD><TD>" + 
BytesTransfered + " of " + TotalBytes + "</TD></TR>";
    astr = astr + "<TR><TD><b>% Total Bytes Transfered: </b></TD><TD>" + 
strPerc_2 + "</TD></TR>";
    astr = astr + "</Table></Font></BODY></HTML>";	 
    if (typeof(transferwindow)== "object")
After implementing the event handler for the TransferProgress event, we need to add this event handler to the XFRequest object by calling the AddTransferProgressEventHandler method of the XFRequest object. The event handler should be added to the XFRequest object before calling the Start method. The code snippet below sends the upload request to the server using XFile when the user clicks an HTML Button:
function UploadButton_OnClick(){

  /* "xFile" is the instance of the XFRequest object 
   *  created in the <OBJECT> tag 

  // Set the URL to which the upload will be posted
  xFile.CurrentURL = 

  // Set the files to be uploaded
  // Set Timeout for XFile (in seconds)
  // Set to -1 so that XFile won't time out during the transfer
  xFile.Timeout = -1;  

  // Add the TransferProgress event handler 
  // Open a new progress window to display progress
  winstyle = "height=250,width=700,directories=no,status=no," + 
  transferwindow = window.open("","Transfer",winstyle);   
      // Begin the transfer

       alert("Error: " + errorObject.name  + 
             "\nMessage: " + errorObject.message +
             "\nNumber: " + errorObject.number + 
             "\nDescription: " + errorObject.description);  


  // Disable the upload button
  document.all("UploadButton").disabled = true;
In the above code, XFile is posting the upload request to an ASP.NET page (FileUp_UploadProcess.uplx) that uses FileUp for upload processing on the server. You should set the CurrentURL property of the XFRequest object to an existing URL on your server.
And also note that the new progress window that is opened in the above code is actually filled in with dynamic HTML in the "TransferProgressEventHandler" function further above.

The above "UploadButton_OnClick" function shows the most common settings of XFile used to post an upload to the server. To see more advanced settings of XFile and how to use other events of the XFRequest object, see the complete code of the "XFile_Non_Visual_Upload_JavaScript.htm" page in the attached Visual Studio .NET 2003 C# project.

Setting up the attached sample

The attached sample is a Visual Studio .NET 2003 ASP.NET Web Application project with codebehind in C#. In this web application, the XFile page is kept separate from the FileUp upload processing page in order to make the configuration and maintenance easier. Here are the instructions to set this sample up:

  1. Extract the attached zipped project to a directory called "XFile_FileUp_Upload_CSharp_VS2003".
  2. If you don't already have a "C:\Temp" directory, create one. Make sure that your account has the "Read/Write/Modify" permissions to this directory. This directory is being used when adding the upload files to the XFRequest object in "XFile_Non_Visual_Upload_JavaScript.htm".
  3. Extract the "sample_upload_files" zip folder contained within the project folder and put the sample upload files "uploadFile1.sa", "uploadFile2.sa" and "uploadFile3.sa" into this "C:\Temp" directory. These are the upload files pre-set in "XFile_Non_Visual_Upload_JavaScript.htm".
  4. Right click on the project's directory "XFile_FileUp_Upload_CSharp_VS2003", and choose "Properties".
  5. On the "Web Sharing" tab, select "Share this folder" and click OK on the dialog that pops up.
  6. Open XFile_FileUp_Upload_CSharp_VS2003.csproj in Visual Studio.NET 2003.
  7. Add a Reference to "safileup.dll" and "FileUpModule.dll", usually located in "C:\Program Files\SoftArtisans\FileUp\dotnet". (Make sure safileup.dll is the same version as the FileUp COM dlls that are registered on the system.)
  8. Edit the web.config file, changing the "Version" property for the FileUpModule in the section to match the version of FileUpModule.dll that you added. (It currently says "Version=".)
  9. Copy SAXFile.cab to the root directory, usually located in the "C:\Program Files\Software Artisans\SA-XFile" directory.
  10. Rebuild the Project.
  11. Run the sample by opening http://localhost/XFile_FileUp_Upload_CSharp_VS2003/XFile_Non_Visual_Upload_JavaScript.htm in Internet Explorer.

Note: This sample is hard-coded to automatically upload certain files from the client machine. But XFile can be used in other ways, such as providing a visual upload control using the AXFFile object to allow users to browse in their filesystem and select files to upload.

Created : 12/28/2007 1:30:18 PM (last modified : 12/28/2009 5:59:06 PM)
Rate this article!