Uploads Made Simple

Revising the Add Listing Page

Now that we understand some of the advantages, and potential pitfalls, of implementing a file upload feature, let's revise Chip Havilmyer's Add Listing page. To do this, we'll use George Petrov's Pure ASP File Upload (ASP) and the <cffile> tag (ColdFusion).

Using Pure ASP File Upload (ASP)

As you may recall, when you add the enctype="multipart/form-data" attribute to a <form> tag, the ASP Form collection is unable to process the binary data. To get around this, many ASP upload components offer their own Form collection to extract the values of the form fields (e.g., upl.Form("FileDescription")). But these collections aren't compatible with Dreamweaver's standard Insert Record SB. What's a developer to do?

One solution is to find every occurrence of Request.Form and Request.QueryString on your ASP page, and replace them with the new form object (e.g., upLoad.Form). This is easy enough to do using Dreamweaver's Find and Replace feature (Edit | Find And Replace). After applying these changes, however, the Insert Record SB can no longer be edited using the Server Behaviors panel.

The Pure ASP File Upload extension, on the other hand, detects the Insert Record SB, parses its code, and replaces Request.Form and Request.QueryString with UploadFormRequest and UploadQueryString, respectively.

Launch Dreamweaver MX and open addListing.asp. In the last chapter, we used George Petrov's Insert Record With Identity extension in place of Dreamweaver's standard Insert Record SB. Fortunately, since George is also the author of Pure ASP File Upload, the two extensions are compatible.

NOTE: This recipe uses the commercial version of Pure ASP File Upload (version 2.0.8), and not Pure ASP File Upload 1.5. At the time of this writing, the free version is not compatible with Dreamweaver MX.

Follow these steps to apply Pure ASP File Upload to the Add Listing page:

1.  From the Server Behaviors panel, choose UDzone | Pure ASP Upload 2.08. On the Main tab, click Browse and select the "../images/listings" directory.

2.  Click the Images Only radio button and select MakeUnique from the Conflict Handling drop-down menu. Since there is only one form on the page, it should be selected automatically.

3.  Ignore the remaining text boxes and click OK to apply Pure ASP File Upload.

4.  A dialog box informs you that a new folder, ScriptLibrary, has been created in the site root. This folder and the file it contains — incPureUpload.asp — must be uploaded to your remote site for Pure ASP File Upload to work.

Now let's add the filename of the image to the database insert. Double-click Insert Record in the Server Behaviors panel. In the Form Elements area, select File1 and choose ListingPic from the Column drop-down menu.

That's it! If you've installed MDAC 2.5 or higher, and you've set the NTFS permissions correctly, you should be able to test the upload feature on your local server. Save your work and press F12 to preview the page in a browser. Fill out all of the form fields and browse to an image on your hard drive. Click the Add Listing button. Your new listing should look something like this:

If you receive an error — e.g., "Syntax error in INSERT INTO statement" — verify that you completed all of the form fields. In particular, make sure not to insert any commas in the Price field.

NOTE: Pure ASP File Upload uses JavaScript to validate the file field. While this reduces the strain on the server, keep in mind that users can circumvent client-side code by disabling JavaScript in the browser.

If you're still having trouble, you may want to skip ahead to the "Form Validation" section. This will ensure that all of the form fields contain properly formatted data.

Download Article as PDF