Parent | Child | Previous | Next
 

Uploading and Displaying Images

Description

A common web application requirement is to allow users to upload and view images. This example provides a simple model that you can start with.

The Database Design

The ImageDB database has 4 fields.

The image files are stored in a folder named "Images" under the folder containing the database files.

Publishing Profiles

The Local Webroot profile contains the following information.

The Server profile contains the following information.

The Grid Component

The grid (named Main ) is based on the ImageDB table. The Order expression is invertUploaddate?, which causes the newest images to be shown first. The grid component displays all 4 fields in the database. The Name field is displayed in a TextBox. The ID and Uploaddate fields are displayed in labels. the Name column contains a free form template that displays the values of the Name and Uploaddate fields. The Uploaddate column is hidden. The Image field is displayed in an Image control, which has the following Image Properties > Image path property: [PathAlias.ADB_Path]\images, which evaluates to \\Doc\C\Data\ImageDB\Images on the server.

The A5W Page

The A5W page (named Main ) contains the Main grid component, HTML text, a standard HTML form with a textbox and 2 buttons, and an Xbasic script. The form appears just above the grid on the body of the page and looks like this.

images/WPT_Image_Upload_Form.gif

The code that generates this form is below. The <%a5 ? request.script_name %> action causes the page to reload when the user clicks either of the buttons. The <input type="file" name="FileToUpload" > code generates the Browse... button and allows the user to navigate to and select a file. The <input type="submit" name="cmd" value="Upload File"> code creates a variable named cmd when the user clicks the Upload File button. 

<form action=" <%a5 ? request.script_name %> " method="post" enctype="multipart/form-data">
<input type="file" name="FileToUpload" >
<input type="submit" name="cmd" value="Upload File">
</form>

The Xbasic script is located inside the <head> ... </head> tags of the page. The first thing the script does is test to see if the cmd variable exists, which is doesn't until the user clicks the Upload File button. 

<%a5
dim msg as c = ""
if eval_valid("cmd")

After the user clicks Upload File, the if eval_valid("cmd") statement returns TRUE, and the rest of the code executes. The script gets the filename selected by the user from FileToUpload.filename, prefixes the appropriate path information ( [PathAlias.ADB_Path]\images\\ ), and saves the result in fn. 

dim fn as C

fn = "[PathAlias.ADB_Path]\images\\" + FileToUpload.filename

Next, the script loads the file's contents into the variable FileToUpload.data and generates a message indicating that the file was successfully uploaded. (A more rigorous script would include error handling to deal with the possibility that the user selected a non-JPEG file.) The code to display the message ( <%a5 ? msg %> ) is just below the <body> tag. 

file.from_blob(fn, FileToUpload.data)
msg = "<a href=\"/" + FileToUpload.filename + "\" target=\"_blank\">" + FileToUpload.filename + "</a> was uploaded<br /><br />"

Finally, the script opens the ImageDB table and writes a new record. 

tbl = table.open("[PathAlias.ADB_Path]\ImageDB.dbf")
tbl.enter_begin()
tbl.Image = fn
tbl.Name = FileToUpload.filename
tbl.Uploaddate = now()
tbl.enter_end(.t.)
tbl.close()
end if
%>

The page looks like the following.

images/WPT_Uploading_Images.gif