Accessibility

ColdFusion Article

 

Multiple file upload with Flex and ColdFusion


Table of Contents

  1. Introduction
  2. Installing and configuring the application
  3. Understanding the code

Installing and configuring the application

The Multi-File Upload application consists of two major parts: the Flex files that you compile in Flex Builder and a ColdFusion template residing on your ColdFusion server. This article assumes you are using ColdFusion MX 7.0.2 Developer Edition installed locally. If you are using a different configuration, change the address http://localhost:8500/ to match your own server and directory configuration.

  1. Create a new project in Flex Builder 2 and title it MultiFileUpload. When Flex Builder asks for the type of project to create, select Basic.
  2. Download the Multi-File Upload Application sample files that accompany this article from the Requirements section.

  3. Unzip the archive into your newly created Flex project directory (see Figure 1).

    Flex project layout

    Figure 1. Flex project layout

  4. Create a new directory on your ColdFusion server and name it MultiFileUpload. Place the contents of your /bin directory here after you compile the Multi-File Upload application in Flex Builder. Your server directory will be similar to http://localhost:8500/MultiFileUpload.
  5. Create a subdirectory named uploadedFiles within the MultiFileUpload directory. Your Multi-File Upload application will upload files to this new directory.
  6. From the downloaded sample application, locate upload.cfm, and copy the file to the server's MultiFileUpload directory.
  7. In Flex Builder, open the FlexFileUpload_cb.as file. Locate the variable uploadDestination. The variable is currently set to http://[yourserver]/MultiFileUpload/upload.cfm. Replace the [yourserver] portion with the URL to match your server configuration. In this case it's http://localhost:8500/MultiFileUpload/upload.cfm.
  8. Run the Flex Builder compiler. By default, you can find your compiled code in the /bin directory within your Flex project.

  9. Open the /bin directory. Copy the contents to your server in the directory you created in Step 4.

    Note: You may, at your discretion, omit the debug-related HTML and SWF files.

  10. Run the application by opening your web browser to: http://localhost:8500/MultiFileUpload/FileUpload.html.

ColdFusion back end

The ColdFusion back end consists of one file, upload.cfm, which accepts files uploaded from the Flex application. This file acts as a gatekeeper to ensure that the uploaded file types are desirable. When an error occurs, the application will generate debug information in PDF file format. In the next sections, I give a more technical walkthrough of the code.

Flex application

The Flex application consists of the following files:

  • FileUpload.mxml: Main application file that contains the user interface elements for the application.
  • FileUpload_cb.as: ActionScript include for FileUpload.mxml.
  • MultiFileUpload.as: Class definition that handles all the work of the actual file uploading process and cue management. This is located in the package com.newmediateam.com.fileIO, which is included with the sample download.
  • Ding.mp3: Sound file that is embedded and played after the batch of files to upload has completed its transfer to the server. This file is located in the audio directory under the /assets folder.
  • main.css: Style sheet for the application located in the /styles directory under the /assets folder.
Page 2 of 3
Previous Page
Next Page