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)) + "%";
}
else
{
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")
{
transferwindow.document.write(astr);
transferwindow.document.close();
}
}
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 =
"http://localhost/XFile_Upload_App/FileUp_UploadProcess.uplx";
// Set the files to be uploaded
xFile.AddFile("C:\\Temp\\uploadFile1.sa","FileName1");
xFile.AddFile("C:\\Temp\\uploadFile2.sa","FileName2");
xFile.AddFile("C:\\Temp\\uploadFile3.sa","FileName3");
// 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
xFile.AddTransferProgressEventHandler(TransferProgressEventHandler);
// Open a new progress window to display progress
winstyle = "height=250,width=700,directories=no,status=no," +
"menubar=no,scrollbars=no,resizable=no,copyhistory=no,location=no";
transferwindow = window.open("","Transfer",winstyle);
try
{
// Begin the transfer
xFile.Start();
}
catch(errorObject)
{
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:
- Extract the attached zipped project to a directory called "XFile_FileUp_Upload_CSharp_VS2003".
- 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".
- 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".
- Right click on the project's directory "XFile_FileUp_Upload_CSharp_VS2003", and choose "Properties".
- On the "Web Sharing" tab, select "Share this folder" and click OK on the dialog that pops up.
- Open XFile_FileUp_Upload_CSharp_VS2003.csproj in Visual Studio.NET 2003.
- 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.)
- 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=5.0.14.555".)
- Copy SAXFile.cab to the root directory, usually located in the "C:\Program Files\Software Artisans\SA-XFile" directory.
- Rebuild the Project.
- 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.
|
