Uploads Made Simple

Uploads Made Simple

In this chapter, we're going to revise the Add Listing page to allow Chip Havilmyer to upload an image along with a new realty listing. We'll also revise the Insert Record server behavior to insert the image's filename into the database.

As you probably know, implementing a file upload feature can be difficult. Often it requires the installation of a third-party component, such as AspUpload or FileUp, and a thorough knowledge of how to script that component. In addition, your hosting provider may not offer the same component on your remote server (if they offer one at all).

The goal of this recipe is to make file uploading as simple as possible. Thanks to new support for the <cffile> tag, and a first-rate ASP extension by George Petrov, implementing file uploads with Dreamweaver MX has never been easier. But before we start cookin', it may be useful to understand what has traditionally made file uploading such a downer.

The Trouble with Multipart/Form-Data

Before someone can upload a file from a web page, it must contain a file field. In Dreamweaver MX, you add a file field to an existing form by choosing Insert | Form Objects | File Field. In Code view, here's what the file field looks like:

<input type="file" name="file">

Not much to it, is there? If only it were that simple! Because HTML forms were originally designed to submit text data, the W3C (World Wide Web Consortium) had to come up with a standard for handling binary, or non-ASCII, form data. The solution? The HTML 3.2 Specification introduced a new form attribute: enctype="multipart/form-data". Including this attribute in an HTML <form> tag instructs the browser that the contents of the submitted form will be encoded as binary data (the default content type is "text/html"):

<form name="upload" method="post" enctype="multipart/form-data">

Here's where the trouble begins. Once you add enctype="multipart/form-data" to an HTML form, the ASP Form collection cannot process the binary data. In plain English, this means that you can't use Request.Form on the action page to retrieve the values of the form fields. If you do, you'll receive an error message like this: "Cannot call BinaryRead after using Request.Form collection."

As a workaround, most ASP upload components offer an alternative Form collection to give you access to the form variables. Then what's the big deal? Dreamweaver's Insert Record server behavior uses the Request.Form collection. This means that if you script an upload using FileUp, and then apply the standard Insert Record SB, your ASP page won't work. This leaves you with two options: revise the standard Insert Record SB, or obtain a Dreamweaver MX upload extension that revises it for you.

Uploading files with ColdFusion, on the other hand, is much easier. This is because ColdFusion's FORM variables are still intact when the enctype="multipart/form-data" attribute is specified. In addition, upload support is built right into ColdFusion with the <cffile> tag. Whereas ASP requires you to instantiate an object, ColdFusion only requires a special tag. Here's an ASP example that uses Soft Artisans FileUp to upload an image:

<%
'*** Create an instance of the FileUp object ***
Set upl = Server.CreateObject("SoftArtisans.FileUp")

'*** Set the path to store uploaded file ***
upl.Path = Server.MapPath("/images/")

'*** Instruct FileUp to generate a unique filename
'if the file already exists on the server ***
upl.CreateNewFile = TRUE

'*** Save the file ***
upl.Save
%>

Here's a ColdFusion example that performs the same task (the symbol indicates that the code should appear on a single line, even though it wraps in the code listing):

<cffile action="upload" filefield="File1" 
destination="#ExpandPath("images")#"
nameconflict="makeunique">

Of course, there are other issues to keep in mind — for instance, many hosting providers disable the <cffile> tag for security reasons — but as you can see, ColdFusion gets the job done with a single line of code.

Download Article as PDF