Exercise 2.3: Using the file upload component

Before you begin, complete Exercise 2.2: Formatting a data table.

Now that you are displaying the PHOTO column, you should provide the ability for the users 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.

 

 

Adding the current photo to the page

You will notice that the update form is nothing more than an HTML table with some static text and some 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 Tuning the default data table in Exercise 1.2: Working with the relational record list and data table components.

1. Double click the update_record.jsp page in the Project Explorer view.
2. Place the cursor in the first (top left) cell of the table. This cell is labeled ID.
3. From the menu bar, click Table > Add Row > Add Above to create a new row at the top of the table which will contain the current photo for the record.
4. In the left-most cell of this new row, type Current photo: to act as a label.
5. 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.

6. 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.
7. In the Properties view, click the Select Page Data Object button next to the Type field. The Select Page Data Object window opens.

8. Click the + symbol to expand the update_record relational record.

9. Click IMAGETYPE (String).

10. Click OK.

    Now, the page shows the current photo for the classified ad, if it has one. Your page should look like this:

    

 

Adding the file upload component to the page

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

1. Place the cursor in the last row by clicking inside the cell containing the Phone: text.
2. From the menu bar, click Table > Add Row > Add Below.
3. In the first cell of the new row, type New photo: as the label.
4. Drag a File Upload component from the Faces Components drawer of the Palette into the last cell of the new row.
5. 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:

   

6. Save the page and test it if you want.

You are ready to begin Exercise 2.4: Using navigation rules.