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.
Storing Image Dimensions in Hidden Fields (ColdFusion)
Follow these steps to complete the Add Listing Details page:
1. Click <form> on the tag selector and choose Massimocorner | Check Image Upload from the Behaviors panel. The file field, File1, should be selected automatically.
2. On the Main tab, enter 1 as the minimum file size in the From text box.
3. Click the Advanced tab. From the first drop-down menu, Store Image's Width In Form Field, choose the PicWidth field. From the second drop-down, choose the PicHeight field.
Click OK to apply Check Image Upload.
4. Now we can make the database insert. From the Server Behaviors panel, choose Insert Record. Choose realty from the Data Source drop-down menu, and ListingRooms from the Insert Into Table drop-down.
5. Most of the database columns and form fields should sync up nicely. Select ListingRoomPic in the Columns area and choose FORM.File1 from the Value drop-down menu.
6. Leave the redirect text box empty and click OK to apply the Insert Record SB.
7. To upload the image, switch to Code view and enter the following code after the opening <cfif> tag on line 3.
<cffile action="upload" filefield="File1" 
destination="#ExpandPath("../images/listings/details")#"
nameconflict="makeunique" accept="image/*">
<cfif isDefined("FILE.FileWasSaved")>
<cfset FORM.File1 = FILE.ServerFile></cfif>
This code is virtually identical to the code we inserted into the Add Listing page. The only change is the folder specified in the destination attribute of the <cffile> tag.
8. Switch back to Design view and click <form> on the tag selector. Using the Property inspector, change the Action to the following (the new code is shaded):
<cfoutput>#CurrentPage#?#CGI.QUERY_STRING#</cfoutput>
This way, the correct listing is selected if the visitor decides to make another insert.
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_cf/adminch/addDetails.cfm?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.
NOTE: Massimo's extension uses cutting-edge JavaScript to obtain the image's dimensions. So cutting-edge, in fact, that this feature — storing the image's dimensions in hidden fields — works only on PCs with Netscape 6+ or Internet Explorer 5+.
If you run into any problems, take a look at the completed version of the Add Listing Details page in the realty_cf folder you downloaded earlier.
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.