Tutorial 31: How to upload any image file and display it on Image component at run time

This tutorial explains how to bind the image component to a datasource column of data type BLOB. This tutorial creates a new application which uploads an image to datasource column and displays the uploaded image with an image component. You may want to check Tutorial 15: How to upload a file tutorial first.

Creating the Formspider Application

Open Formspider IDE and click “New Application” under the “File” menu. The “New Application” dialog shows up. Enter “image” as the name of the application and select any schema as its Datasource Schema name.  If you are using Formspider Online, you do not need to enter database schema name since your account is already configured to use your online database schema. Leave other fields empty and click “OK”. This creates the “image” application with a default mainframe (called “mainFrame”) and a default panel (called “mainPanel”).

a- Creating Datasource

Create a new table named T_IMAGE in your Datasource Schema which has a BLOB column and insert empty row into table. Here is a sample DDL:

CREATE TABLE "T_IMAGE"
(
    "PHOTO" BLOB
)
/
INSERT INTO T_IMAGE VALUES (null)
/

Then create a new datasource definion based on this table. To achieve this, expand the “Datasource Definitions” accordion panel, select the “Datasource Definitions” root node and click the “+” button from the toolbar of the accordion panel. The “New Datasource Definition” dialog shows up.

Select “Table” from the “Based On” section and T_IMAGE table from the combobox. Note that, the name of the “Datasource Definitions” is “T_IMAGE1″. Create an empty row in table.

b- Creating GUI of the application

As the first step, double click the “mainPanel” under the “Panels” node of the “Containers” navigation tree to open it in the editor. Edit panel XML so that it contains a fileUpload component and an image component.

<panel>
  <xyLayout>
    <cell x="5" y="5">
      <fileUpload name="upload_photo" domain="DefaultBLOB" column="PHOTO" dataSource="T_IMAGE1" uploadOnEvent="valueChanged" uploadFrom="mainPanel.upload_photo">
        <events>
          <valueChanged></valueChanged>
        </events>
      </fileUpload>
    </cell>
    <cell x="5" y="60">
      <image name="img" column="PHOTO" dataSource="T_IMAGE1"/>
    </cell>
  </xyLayout>
</panel>

In this panel, fileUpload and image components are bound to the same column. This way, when the value of fileUpload component is changed, the display of the image component changes. Note that, there is an empty “valueChanged” event without an action which is used to send uploaded file to the database.

Running application

Press “Run on Web” button or press F7 to run the application. Use the Browse button to select an image file. Upload the image. Note the image component shows the last uploaded image.

Binding image component to a datasource column