Lesson 2.2: Use the file upload component

Use this lesson to learn how to give users the ability to upload pictures for the classified ads. This function is particularly important on the new_record.jsp and update_record.jsp pages. The file upload component allows users to browse their file system, upload a file to the database, and have this file show up in the database immediately.

Since the procedure for using the file upload component is similar in both the create and update cases, this exercise will allow the update page to change the current image for any listing. If you want, you can make the same changes to the new record page when you are finished with the update page.

Add the current photo to the page

You will notice that the update form is nothing more than an HTML table with static text and input components bound to columns in the update_record relational record. Knowing this, you can add rows and columns to modify the form just like modifying any HTML table. In the following steps, you will add a new row to show the current photo.

Adding rows and columns is more complicated in a data table displaying a relational record list. For information about adding columns to a data table, refer to Lesson 1.2: Connect to a database and display data on a Web page.

Double click the update_record.jsp page in the Project Explorer view.
Place the cursor in the first (top left) cell of the table. This cell is labeled ID.
From the main menu, click Table > Specify and Add. The Add Rows or Columns dialog opens. Click Rows then Above the selected cell. This will create a new row at the top of the table that will contain the current photo for the record. Click OK.
In the left cell of this new row, type Current photo: to act as a label.
Drag an Image component from the Faces Components drawer of the Palette into the right-most cell of the new row. Unlike in the previous exercise, you will allow the user to see the full image without constraining the size, so do not change the width and height in the Properties view.
Bind the image component to the PHOTO column of update_record by dragging the PHOTO column from the Page Data view onto the new image component. The image component is now bound to the PHOTO column of the database.
With the graphic image still selected, go to the Properties view and click the Select Page Data Object button next to the Type field. The Select Page Data Object window opens.
Click update_record (Service Data Object) > update_record (ADS) > IMAGETYPE (String).
Click OK Now, the page shows the current photo for the classified ad, if it has one. Your page should look like this:

Add the file upload component to the page

Next, add a new row to the bottom of the table to contain the file upload component.

Place the cursor in the last row by clicking it.
From the menu bar, click Table > Add Row Below.
In the first cell of the new row, type New photo: as the label.
Drag a File Upload component from the Enhanced Faces Components drawer of the Palette into the last cell of the new row.
In the same way that you bound the image component, bind the file upload component to the PHOTO column of the update_record relational record. {PHOTO} is shown in the text field to show that this component is bound to the PHOTO column and that the uploaded file will be placed in that column. Your page should look like this:
Save the page and test it if you want.

Lesson checkpoint

You have completed Lesson 2.2. In this lesson you learned how to manipulate the table on the update page, add a current photo to the table, and add a file upload component to the table.

< Previous | Next >