Tutorial: Uploading Files and Verifying that they exist

By Kevin M Schreiner

March 29, 2010

Introduction

The purpose of this demonstration is to provide a sample of Uploading files via OpenWebStudio and additionally, utilizing an Ajax Request to verify that the file does not already exist.

Abstract


The following demonstration walks through a scenario which will allow for a File upload, and, prior to upload, a check to see if the file already exists. In this scenario, the validation must check to see if the file exists prior to the transfer of any data. This is because a File Upload requires a full postback of the data, rather than a simple AJAX request and, additionally, the wasted bandwidth of an upload, especially on large file sizes, will slow down requests to the server dramatically.

Video
Tutorial: Watch and Learn

 
To get started, lets assume you have already installed Open Web Studio on your target platform.

 

  1. To begin, we must first create a Template. In this case there is no query to execute so a No-Query Detail Template is added.
  2. The body of the Template Action must contain two things. First - an input element with the type set to File and second, a Submit Button which will both validate the value and, upon success, send the file to the server. We will start by setting the body to the following:

    <input type="file" id="frmFile" name="frmFile"/><button onclick="document.forms[0].submit();return false;">Upload</button>

  3. The previous syntax demonstrates how to submit the form. Before we add the complication of the validator, let's go ahead and fulfill the file upload.
  4. We now know we have two possible capabilities of our module. The First, a standard view of the form, and the second, an upload. We must now add a set of conditions to support this possible branching. Add an If Condition Action, an and Else Condition Action.
  5. Move the current No-Query template to the Else branch. Then double click the If Condition.
  6. Set the Condition to check to see if a File has been placed in the Form. This can be done by checking the Length of the file input object: [frmFile.Length,Form]. When no file is present, the result of this would not be greater than zero. This doubles as an elimination of empty file uploads.

    [frmFile.Length,Form] > 0
     
  7. If the File is present, we want to save the file. Add a File Action to the If branch, and then fill out the properties to save the Incoming Source file into a Target Directory located on the server. Using a relative path like "/Sample/" and a filename directly provided within the upload [frmFile.Name,Form] we can save the file, assuming we have already performed the validation.
  8. Now that the file has been saved, we can display that the file has been saved using a No-Query template, and additionally, we can identify that the file exists by consuming the Exists Formatter:

    <div>Thanks, the file has been uploaded and it exists - [FORMAT,/Sample/[frmFile.Name,Form],{EXISTS}]</div>

  9. Publish the configuration and give it a go.
  10. Now we must fulfill the task of Validation, this is done by leveraging an ajax request. That Request will check the file system for a file of the same name and respond back to the client interface either an additional call to submit the form OR a validation failure message.
  11. First, we should add a way for the message to be displayed. On the Else branch, add a div to provide the validation result:

    <div id="dvValidate"></div>
  12. Next, we need to change the Submit button so that instead of submitting the form, it should perform an ows.Fetch() request to check the validity of the form. Unfortunatly, File Input elements are not transferred via OWS.Fetch - so we must pass the Name of the file to be checked to the server. This will double as a command to our OWS configuration to Check the file existance. To do this we will change the onclick attribute to:

    ows.Fetch('[ModuleID,System]',-1,'check='+document.forms[0].frmFile.value,'dvValidate');return false;
  13. Now, add a new Conditional Branch to the configuration - as an Else-If
  14. Double Click the else-if and set it to check the incoming Querystring Parameter 'check' for a length greater than zero:

     [FORMAT,check,querystring,{LENGTH}] > 0
     
  15. When the length of check is greater than zero, we know we have a filename to check, so next We want to add a sub condition which checks if the file exists. Add an If Condition and make it a child of the previous Else-If. Also add an Else condition.
  16. Set the new If Condition to check to see if the file Exists. This is done using the same formatter we used previously for identifying that the upload works, only this time the filename is in the querystring:

    [FORMAT,/Sample/[check,querystring],{EXISTS}] = True
     
  17. If the file exists, we want to confirm that the upload should take place - add a No-Query Template as a child of this condition and set a javascript function to confirm the upload and if confirmed, submit the form:

    <script type="text/javascript">
    if (window.confirm('The file exists, are you sure you want to replace the existing file?'))
    document.forms[0].submit();
    </script>
  18. Finally, if the file did not exist, we want to force the form to submit, so add a No-Query Template to the else condition and set it to a script tag

    <script type="text/javascript">
    document.forms[0].submit();
    </script>


  19. Publish the configuration and review what you have created.

 

Average ( Ratings):
 
Want to help out?
 
 

New York, NY • Baltimore, MD • Vienna, VA • St. Louis, MO • Seattle, WA • 410.327.0007 • info@R2Integrated.com

Bookmark & Share Bookmark and Share