Chapter 13 of "The Joy of Dreamweaver MX" explains how to easily add a file upload feature to your site. It covers the most popular file upload extensions for ASP and ColdFusion MX, as well as storing image dimensions in hidden fields, and inserting the filename into a database.
This tutorial, and others like it, can be found in the book "The Joy of Dreamweaver MX," published by McGraw-Hill/Osborne.
The book's companion site is www.newmanzone.com.
The Add Listing Details Page
Now that we've got the hang of file uploading, let's apply what we've learned to another admin page: Add Listing Details. Expand the adminch folder in the Site panel and open addDetails.asp (or addDetails.cfm). The purpose of this page is to allow Chip Havilmyer to add additional photos and descriptions to a selected listing. These photos are displayed on the Listing Details page (see Chapter 17).
The Add Listing Details page presents an interesting challenge. The dimensions of the uploaded image have to be saved to the PicWidth and PicHeight columns of the ListingRooms table. Why? Because Chip wants visitors to be able to click on thumbnail photos of the rooms to make full-size photos appear in pop-up windows. In order to open pop-up windows sized to the exact dimensions of the image, we need to store the width and height of the image in the database.
How do we do this? Fortunately, Pure ASP File Upload already includes this feature in its advanced options. ColdFusion users can take advantage of Massimo Foti's Check Image Upload behavior. Both of these extensions allow you to store an image's dimensions in hidden form fields.
Before we can apply these extensions, we need to create the hidden form fields. In the Document window, place your cursor inside the addDetails form and select the Forms tab on the Insert bar. Click the Hidden Field button twice. Using the Property inspector, name the hidden fields PicWidth and PicHeight.
Storing Image Dimensions in Hidden Fields (ASP)
Follow these steps to complete the Add Listing Details page:
1. From the Server Behaviors panel, choose Insert Record. Choose the realty connection and select ListingRooms from the Insert Into Table drop-down menu.
2. Most of the form fields and database columns should sync up nicely. Select File1 in the Form Elements area and choose ListingRoomPic from the Column drop-down. Click OK to apply the Insert Record SB.
3. Now we can upload the image. From the Server Behaviors panel, choose UDzone | Pure ASP Upload 2.08.
4. On the Main tab, click Browse and select the "../images/listings/details" folder.
5. Click the Images Only radio button and select MakeUnique from the Conflict Handling drop-down menu.
6. Click the Advanced tab and select PicWidth from the Save Width In drop-down. Select PicHeight from the Save Height In drop-down. Click OK to apply Pure ASP File Upload.
Save your work and press F12 to preview the page in a browser. The first listing, 15 King Street, appears by default. To work with a different listing, add a URL parameter to the page (e.g., http://localhost/realty_asp/adminch/addDetails.asp?ListingID=3).
Select an image and submit the form. If all goes well, the image is uploaded to images/listings/details, and the conditional region is displayed:
You can open the ListingRooms table in Microsoft Access to confirm that the image's width and height were saved to the PicWidth and PicHeight columns.
Author of "The Joy of Dreamweaver MX: Recipes for Data-Driven Web Sites," Paul Newman is President of BRAVE NEW WURLD, a New York web design firm. He has a BA in English and Creative Writing from Binghamton University and an MFA in Film Production from the UCLA Department of Film, Television, and Digital Media.
Paul's computer experience dates back to 1985, when he bought one of the first Apple Macintosh computers in his senior year of college. He has been building web sites since 1997, and his clients include RaikaUSA.com, VoiceoverAmerica.com, Officetek.com, and BarbaraTyson.com.