To integrate Appletfile into your page, you will need to create a JavaScript function, processUpload, to handle the client-side processing of the file upload request including:

Initiating the file upload request
Polling for upload completion
Displaying the upload response

Initiating the file upload request

The upload method does not automatically copy form data into the upload request. To copy form data into the upload request, you must use JavaScript to call the addElement method for each data item in your form that you want to be included. This must be done prior to calling the upload method. For example:

<script language="JavaScript">
<!--
function processUpload(form)
{
   var applet = document.FileUpload;
   applet.addElement('TEXTAREA1',form.elements['TEXTAREA1'].value); 
   applet.upload(form.action,navigator.userAgent,document.cookie); 
   waitForCompletion(); 
   return false;
}

Your processUpload function should always return false to ensure that the browser does not try to submit your form. Otherwise, the request sent by the browser will conflict with the upload request sent by Appletfile.

Polling for completion

When the upload method is called it runs asynchronously. If you wish to access the response after the upload, you will need to poll for completion by calling getUploadProgress until it returns 100. You can accomplish this by adding the following function to your page and calling it right after you call the upload method.

function waitForCompletion()
{
  var percent = document.FileUpload.getUploadProgress();
  if (percent == 100)
  {
    displayUploadResponse();
  }
  else
    window.setTimeout('waitForCompletion()',100);
}

Displaying the upload response

After the upload has completed, you can access the upload response using the getUploadResponse method.  To display this response in the browser window, you will need to post the response back to the server as follows:

function displayUploadResponse()
{
  var form = document.forms['results'];
  form.elements['response'].value = document.FileUpload.getUploadResponse();
  form.submit();
}
//-->
</script>

<form action="results.asp" id="results" name="results" method="post">
<input type="hidden" name="response">
</form>

The results form and its hidden form element are used to post to the response back to script on the server. This script can simply echo the data posted back to the browser. For example, the results.asp script included with the Basic Upload sample consists of a single line of code:

<% Response.Write Request("response") %>

While it may be tempting to use document.write to display the upload response directly to the browser window this will cause some browser configurations to hang!  This technique will also cause security warnings if your application is running under SSL!

Another way of displaying the response is to use the alert function. Since the alert function does not handle HTML tags, you will need to modify your upload script to return plain text as a response. You could then use code similar to the following to display the response in a pop-up:

function displayUploadResponse()
{
  alert(document.FileUpload.getUploadResponse());
}
//-->
</script>