Uploading and Displaying Images
- The Database Design
- Publishing Profiles
- General > Aliases
- Folder in Webroot > Target folder
- General > Publishing Type
- General > Aliases
- Publish to LAN > Webroot
- Publish to LAN > Target folder
- Publish Database Files > Publish data files
- Publish Database Files > Files to publish
- Publish Database Files > Folder
- Open Page after Publish > Base URL
- Open Page after Publish > Server Port
- Open Page after Publish > Default Page
- The Grid Component
- The A5W Page
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 ImageDB database has 4 fields.
The image files are stored in a folder named "Images" under the folder containing the database files.
The Local Webroot profile contains the following information.
The Server profile contains the following information.
Publish on LAN
[PathAlias.ADB_Path] = c:\data\imagedb
ImageDB (which means that the pages will be stored in \\doc\c\a5webroot\ImageDB )
ImageDB.dbf in the database folder and junk.jpg in the Images sub-folder
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 (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.
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.