Tutorial 15: How to upload a file?

In this tutorial, you are going to upload a small text file from the client’s machine and display its content in a text area.
Open Formspider IDE and create a new Formspider Application named Fileupload. If you are using Formspider Local Installation, use the HR schema as the Datasource Schema. If you are using Formspider Online, then you already have a schema assigned to your account. You can connect to this schema by using the connection information under Tools>User Settings in the IDE Menu.

The Concept

In almost all types of software, there is a need for file interaction. In a desktop application, this can be achieved by simply opening the file and using it. However in client-server applications, this simple approach isn’t applicable. In a client-server environment, files that rest at client-side should be passed to the server side, and this process is called uploading. Formspider has an easy to use component called fileUpload, which lets users to browse and select a file in the client environment, and upload this selected file.
In order to demonstrate the basic functionality of the fileUpload component, you are going to use display the content of the uploaded file in a textArea.

Designing the UI

User Interface of the application is straightforward. You will need three components, for the three steps of the fileupload process.

  • a fileUpload component, to let the user browse and select the file to be uploaded
  • a button, to start the uploading of the file
  • a textArea, to display content of the uploaded file.
First prepare the panel that will display the components. You will populate the important attributes in order to make everything work at a later step.
Open mainPanel’s XML by double-clicking its node in the panel tree, and type the following XML
<panel>
  <xyLayout>
    <cell x="50" y="10" width="200">
      <fileUpload name="FileUploader" domain="DefaultCLOB"/>
    </cell>
    <cell x="300" y="10">
      <button label="Upload File" />
    </cell>
    <cell x="50" y="70" width="350" height="150">
      <textArea name="uploadedText" label="Uploaded Text" labelPosition="TopLeft" domain="DefaultCLOB"/>
    </cell>
  </xyLayout>
</panel>
Save the XML and hit F7 to run the application. Your application should look like the following.
Clicking the “Browse” button in this application opens a file chooser which helps the user select the file to upload. Since the application is not finished yet, the application will not upload the selected file to the server at this point.
The Fileupload component itself doesn’t let the user upload a file. You as a developer decide when the actual file upload will occur.
In the sample application, clicking the “Upload File” button will start the upload.
Navigate to button tag, and add a buttonPress event with following XML.
<events>
   <buttonPress/>
</events>
Next, associate the fileupload event to the button, so that on buttonpress event the upload occurs. Add two attributes to the button tag, namely uploadFrom and uploadOnEvent.

  • Value of the uploadFrom attribute should be the name of the fileupload component, mainPanel.FileUploader.
  • Value of the uploadOnEvent attribute should be “buttonPress”.
After this modification, the panel XML should look like this,
<panel>
  <xyLayout>
    <cell x="50" y="10" width="200">
      <fileUpload name="FileUploader" domain="DefaultCLOB"/>
    </cell>
    <cell x="300" y="10">
      <button label="Upload File" uploadOnEvent="buttonPress" uploadFrom="mainPanel.FileUploader">
        <events>
          <buttonPress/>
        </events>
      </button>
    </cell>
    <cell x="50" y="70" width="350" height="150">
      <textArea name="uploadedText" label="Uploaded Text" labelPosition="TopLeft" domain="DefaultCLOB"/>
    </cell>
  </xyLayout>
</panel>
At the next step you will write the code that will make use of the uploaded file.
Create a procedure to display the content of the uploaded file in a text area.
create or replace
PROCEDURE UPLOADPROCEDURE AS
BEGIN
  api_component.setValue('mainPanel.uploadedText',
                          api_component.getValueCL('mainPanel.FileUploader'));
END UPLOADPROCEDURE;
In the code above, the api_component.getValueCL function  returns the content of the uploaded file as CLOB. The api_component.setValue procedure assigns the value in the CLOB to the textarea component in the sample application.
Next, create an action that points to the UPLOADPROCEDURE and use this action in the buttonPress event of the “Upload File” button. The final Panel XML should look like this;
<panel>
  <xyLayout>
    <cell x="50" y="10" width="200">
      <fileUpload name="FileUploader" domain="DefaultCLOB"/>
    </cell>
    <cell x="300" y="10">
      <button label="Upload File" uploadOnEvent="buttonPress" uploadFrom="mainPanel.FileUploader">
        <events>
          <buttonPress action="uploadAction" />
        </events>
      </button>
    </cell>
    <cell x="50" y="70" width="350" height="150">
      <textArea name="uploadedText" label="Uploaded Text" labelPosition="TopLeft" domain="DefaultCLOB"/>
    </cell>
  </xyLayout>
</panel>
Run the application, click the browse button, and select a .txt file. Then click the Upload File button. You should see content of the selected file in the textarea component.
You may click here to run the application.