Creating a ColdFusion upload page in Dreamweaver CS4

File upload pages allow users to select files from their local hard drive and upload them to a server through a web browser. Building a file upload page with ColdFusion is quick and easy using the upload action of the CFFILE tag. CFFILE is a ColdFusion tag that can perform a variety of file management–related actions such as reading, writing, moving, renaming, and uploading files.

For the purpose of this article, I will focus on the upload action of this tag and provide Dreamweaver CS4 instructions for creating a simple ColdFusion file upload page. Although the step-by-step instructions provided in this article pertain to the Dreamweaver interface, the resulting code, which is listed at the bottom of this page, can be customized for use in other editors as well. The ColdFusion code used in the file upload example will work with versions 5 and above of ColdFusion Server.

Note: Adobe Dreamweaver Exchange lists the latest extensions available for download. In addition to the method provided in this article, you may also want to visit the Exchange to search for related extensions.

Protecting server security

Allowing file uploads can potentially compromise server security. For this reason, it is a good idea to evaluate possible risks before implementing file uploads in a web application. There is no foolproof way to ensure a secure file upload in a web application, although through careful design, it is possible to reduce your risk.

Some suggestions for protecting server security:

• Carefully choose the directory to which the files are to be uploaded. Files should be uploaded to a location on the server that will not conflict with existing application or system files.
• Restrict upload for file extensions that can potentially be dangerous: .cfml, .cfm, .php, .bat, .exe and so on.
• Authenticate users before allowing them to upload files.

Note: For additional information about server security, refer to Security Best Practice: Evaluating the Risks of Allowing Uploading and of Attached Files on Your Server (TechNote 17618).

Building the HTML form

The following steps provide instructions on how to create the HTML form. This simple HTML form will be the interface through which users select and upload files.

1. Create a new ColdFusion document and save it within a defined site that has been configured to handle ColdFusion content. Name this page cf_upload.cfm and change the title from Untitled Document to Upload File with ColdFusion.

   Note: For more information about defining a site, refer to Setting up a site in Dreamweaver CS4 / Setting up a site in Dreamweaver CS5 in Dreamweaver Help.

2. Select Insert > Form or drag a form button onto the page by clicking and dragging the Form icon in the Forms tab of the Insert bar.
3. Select the form using the tag selector or by clicking the red dashed line. If you do not see the red dashed line turn on the Invisible Elements (View > Visual Aids > Invisible Elements).
   • In the Property inspector of the form, enter upload_form in the Form Name field.
   • In the Action field, enter cf_upload.cfm.
   • Switch the method from Get to Post.
   • In the Enctype field, select multipart/form-data.
   • Change to code view (View > Code), the code should now look like the example below:

4. Create an insertion point within the form by clicking inside the red dashed line and choose Insert > Form Objects > File Field. It's also possible to add form objects to the page by dragging them from the Forms tab of the Insert bar. Just click and drag the form object to the desired location within the form tag.
5. Select the file field you just inserted and enter ul_path in the File Field Name of the Property inspector.
6. Add a button form object to the page using one of the methods described in Step 4.
7. Select the button and enter upload_now in the Button Name field of the Property inspector. Set the Action property to Submit form.

Here is the completed HTML form code:

Adding the ColdFusion file upload functionality

Now that the HTML form is ready to go, you can add a few lines of CFML code using the Dreamweaver interface:

1. Choose Code view using the View menu (View > Code) or by clicking the Code icon in the document toolbar.
2. Place your cursor after the <body> tag and press Enter once to create a blank space.
3. Select the CFML Flow tab of the Insert bar and click the cfif button to insert the CFIF tag.
4. In the Code view pane click before the final bracket of the opening CFIF tag and enter:

Your CFIF tag should now match the code below:

5. Click between the opening and closing CFIF tags and press Enter twice to create a blank line. With your cursor at the beginning of this new line, click the CFFILE icon in the CFML Advanced tab of the Insert bar.
6. In the Cffile dialog box, enter the following values (see Figure 1):
   • Action: Choose Upload from the Action list menu.
   • File Field: Enter the name of the File Field form object ul_path.
   • Destination Path: Enter the absolute path to the directory in which the files will be uploaded. The path you enter depends on the location of the directory in which the files will be saved on the server.

   Note: On Unix systems, make sure that the upload path directory is configured with the correct permissions so file upload can write to that directory. Normally, this directory would be owned by the ColdFusion user or the account that runs the web server.

   Note: On Mac OS X systems, if you end up with a path with colons (:) in it—for example, Macintosh HD:Users:ray:Documents:Web Sites:webroot:cfuploaddwarticle—replace colons with forward slashes: /Users/ray/Documents/Web Sites/webroot/cfuploaddwarticle.

   • Accept Files: List the mime types and file types that you will accept separated by commas. For this example, only GIF and JPG image files will be accepted, so enter: image/gif,image/jpeg.
   • Filename Resolution: The option selected in this field determines what will happen if the name of the file to be uploaded already exists on the server. All available options are listed below:
     • Error: The file will not be uploaded and ColdFusion will stop processing the page and return an error.
     • Skip: The file is not uploaded and no error message is displayed.
     • Overwrite: Files with the same name are overwritten.
     • Makeunique: The file is uploaded and given a unique name. In this example, Makeunique is chosen for Filename Resolution.

7. After completing this dialog box, click OK.
8. Between the closing bracket of the CFFILE tag and closing CFIF tag, type in a message to be displayed when a file has been uploaded. For example:

The complete code is listed below: