TechNote (Archived)

Creating a ColdFusion upload page in Dreamweaver MX

Creating a file upload page using ColdFusion
File upload pages allow users to select files from their local hard drive and upload them to a server via the 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 TechNote, we will focus on the upload action of this tag and provide Dreamweaver MX instructions for creating a simple ColdFusion file upload page. Although the step-by-step instructions provided in this TechNote pertain to the Dreamweaver interface, the resulting code which is listed at the bottom can be customized for use in Dreamweaver UltraDev 4 as well. The ColdFusion code used in the file upload example will work with versions 5 and above of the ColdFusion Server.

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

Security concerns
Because allowing file uploads can potentially compromise server security, 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:

	It is recommended that you 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, .pl, .bat, .exe and so forth.
	Authenticate users before allowing them to upload files.

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

Building the HTML form
Below are instructions 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. For more information about defining a site, please see How to define a site in Dreamweaver (TechNote 14028).
2	Insert a form by using the insert menu (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 on 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". In the Enctype field, select "multipart/form-data" and select "Post" in the Method dropdown box. Change to code view (View > Code), the code should now look like the example below: <form action="cf_upload.cfm" method="POST" name="upload_form" enctype="multipart/form-data" id="upload_form"> </form>
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 a form object to the desired location within the form tag.
5	Select the file field you just inserted and enter "ul_path" in the FileField 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.

Let's take a look at the completed HTML form code:

<form action="cf_upload.cfm" method="POST" enctype="multipart/form-data" name="upload_form" id="upload_form"> <input type="file" name="ul_path" id="ul_path"> <input type="submit" name="upload_now" id="upload_now" value="Submit"> </form>

Adding the ColdFusion file upload functionality
Now that the HTML form is ready to go, let's add a few lines of CFML code using the Dreamweaver interface:

1	Choose Code and Design view using the View menu (View > Code and Design) or by clicking the Code and Design icon in the document toolbar.
2	Place your cursor after the <body> tag and press return once to create a blank space.
3	Select the CFML Flow tab of the Insert bar and click on the "if 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: isdefined ("form.upload_now") Your CFIF tag should now match the code below: <cfif isdefined("form.upload_now")></cfif>
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 on the CFFILE icon in the CFML Advanced tab of the Insert bar.
6	In the Cffile dialog, enter the following values: 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:If using the ColdFusion Server 5 the trailing slash ( \ for Windows and a / on Unix) at the end of the path is required. If using ColdFusion MX the trailing slash can be omitted. 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. 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, 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. Example: <cfif isdefined("form.upload_now")> <cffile action="upload" filefield="ul_path" destination="c:\inetpub\wwwroot\upload\" accept="image/jpeg, image/gif" nameconflict="makeunique"> The file was successfully uploaded! </cfif>

The completed code is listed below:

<html> <head> <title>Upload File with ColdFusion</title> </head> <body> <cfif isdefined("form.upload_now")> <cffile action="upload" filefield="ul_path" destination="c:\inetpub\wwwroot\upload\" accept="image/jpeg, image/gif" nameconflict="makeunique"> The file was successfully uploaded! </cfif> <form action="cf_upload.cfm" method="post" name="upload_form" enctype="multipart/form-data" id="upload_form"> <input type="file" name="ul_path" id="ul_path"> <input type="submit" name="upload_now" value="submit"> </form> </body> </html>

Additional information
For more tutorials, articles, and sample applications, please visit the Macromedia ColdFusion MX Application Development Center.

For a comprehensive listing of third-party Dreamweaver resources, which includes many ColdFusion articles and tutorials, please refer toDreamweaver-related websites (TechNote 12607).