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.
Revising the INSERT Statement
Before we can test the upload feature, we need to revise the SQL statement. Switch to Code view and locate the <cfquery> tag on line 6. Carefully add the ListingPic column to the beginning of INSERT statement (the new code is shaded):
INSERT INTO Listings (ListingPic, ListingPrice, ListingAddress...
Now we have to add the form field, File1, to the VALUES clause. Insert a new line after VALUES (line 10) and enter the following code:
<cfif IsDefined("FORM.File1") AND #FORM.File1# NEQ "">
'#FORM.File1#'
<cfelse>
NULL
</cfif>
,
That should do it. Save your work and press F12 to preview the page in a browser. Browse to an image, fill out the form, and click the Add Listing button. Make sure not to place any commas in the Price field. Your new listing should look something like this:
If you run into problems, make sure to complete all of the form fields on the page. Also check the NTFS permissions on the images/listings folder. The Internet Guest Account should have Read and Write permissions.
If you had trouble getting the Add Listing page to work, you can appreciate the importance of form validation: it protects the user from himself. To validate the Add Listing page, we'll use Jaro von Flocken's trusty Check Form extension. If you didn't install Check Form 4.66 in Chapter 5, you can download it from the Dreamweaver Exchange. Of course, the usual admonitions about client-side validation apply.
Open the Add Listing page in Dreamweaver MX (addListing.asp or addListing.cfm, depending on your server model). Click <form> on the tag selector and choose yaromat | Check Form from the Behaviors panel. If you receive the following error message
there is a conflict between Check Form and Pure ASP File Upload's checkFileUpload function. To use both behaviors on the same page, try the following workaround (ColdFusion users can skip steps 1, 7, and 8):
1. Open the Behaviors panel and change the Event trigger for checkFileUpload from onSubmit to onReset. Now choose yaromat | Check Form.
2. Using the list box, select each form element in turn and make sure it's required. (Select the Any radio button for the check boxes, Active and Basement.)
3. When you get to the ListingPrice field, select the second radio button to require a number. Enter 1 in the first text box, and 10000000 in the second text box.
4. Do the same with PropertyAge, but specify a number from 1 to 200.
5. On the last four fields — ListingDesc, Remarks, Equipment, Amenities — click the second radio button and enter 1 to make them required.
6. Click OK to apply the Check Form behavior.
NOTE: The workaround in steps 1, 7, and 8 is required only for ASP users.
7. Select the checkFileUpload function in the Behaviors panel and change its Event back to onSubmit.
8. If this changes the execution order of the scripts, select checkFileUpload in the Behaviors panel and click the Up arrow to make it first.
Now both behaviors are triggered by the form's onSubmit event.
CAUTION: Reapplying one of the behaviors may change the execution order of the scripts.
Save your work and press F12 to preview the page in a browser. Try submitting the page without completing all of the required fields. If you're able to foil the JavaScript validation routine, you may need to return to the Behaviors panel and tweak Check Form until you get it just right.
ColdFusion users may have noticed that the file field, File1, is not validated by the Check Form behavior. To address this, you can insert the following function into the <head> of the document (within the existing <script> tags):
function File_Validator(theFile){
if (theFile.value == ''){
alert('Please select an image.');
theFile.focus();
}
}
Call the function by adding it to the form's onSubmit event (before Jaro von Flocken's YY_checkform function):
onSubmit="File_Validator(File1); YY_checkform...
If you have any trouble getting this to work, take a look at the completed version of addListing.cfm 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.