Understanding the code

The Multi-File Upload application demonstrates the use of several ActionScript classes from the flash.net package for file uploads in a meaningful example that you can reference in the applications you build.

ColdFusion code

The ColdFusion code consists of a single file, upload.cfm, which uses the CFFILE tag to handle the files transferred from the application to the server. Because files uploaded with Flash Player are encoded with a MIME type of application/octet-stream, using the cffile tag's accept attribute to accept specific MIME types will not work.

Instead, you must check the uploaded file's extension against the permitted extension types. Using the listFindNoCase function, you can check the extension of the uploaded file against the acceptedFileExtensions variable, which contains a list of accepted file extensions. Then, using a conditional statement, if the listFindNoCase function returns false, the application deletes the uploaded file using cffile tag's action="delete".

Additionally, to assist in debugging the uploaded file, this application uses the CFTRY and CFCATCH tags to handle any errors and write them to a PDF error handling log file. Without this error handling, it would be difficult to determine server-side errors, as they would not be displayed on their own from within Flash Player.

Flex code

The following file descriptions explain the code behind technique for the Flex side of the application (you can read more about this technique in the Flex Quick Start: Building custom components: Building components using code behind):

• FlexFileUpload.mxml

  • Contains all the user interface elements for the application.
  • Uses the <mx:Script> tag's source value to specify an include file that contains all the necessary ActionScript for this application.
  • The <mx:Application> tag contains the creationComplete="initApp();" attribute, which specifies to Flash Player that—as soon as the application is loaded and drawn—to call the initApp() function from the FlexFileUpload_cb.as file. The initApp() function sets up the variables and components for this application.

• FlexFileUpload_cb.as

  • FlexFileUpload_cb.as acts as code behind page to separate the ActionScript from FlexFileUpload.mxml for easier use.
  • Imports the com.newmediateam.fileIO.MultiFileUpload class definition and creates new instances of the FileFilter and URLVariables for file type filtering and a variable to pass to the server.

  • Instantiates the MultiFileUpload class as multiFileUpload in the initApp() function.

    Note: When instantiating this class, you must pass 10 arguments of specific data types. The arguments are as follows:

    • DataGrid: This is the visual cue for the uploaded files
    • Button: This button is the Browse button
    • Button: This button is the Remove All Files button
    • Button: This button is the Remove Selected File button
    • Button: This button is the Upload Files button
    • ProgressBar: This is the progress bar that displays the upload progress of each file transfer
    • String: This string specifies the server-side destination of the server-side script that handles the file upload

    • URLVariables: This is a variable with a URLVariables data type that contains any additional variables to be passed to the server for processing. The sample application shows two sample variables: postVariables.projectID = 55 and postVariables.test = "Hello World"

      Note: These variables are non-functional in this application. They are present as an example of including additional data with each upload.

    • Number: This specifies the maximum file size permitted for each uploaded file, represented in bytes (a value of 0 specifies that there is no maximum file size limit)
    • Array: This variable must contain an array of FileFilters

• MultFileUpload.as

  • Located in the package com.newmediateam.fileIO, this class definition file contains nearly two dozen functions that do all the "heavy lifting" for you.
  • _files is an ArrayCollection variable that contains a FileRefernce object. This variable is also bound to the DataGrid as its data provider.
  • _file is a single FileRefernce object that contains data about the file to be uploaded.
  • _uploadURL is a URLRequest object that contains all the details the FileReference upload method needs to upload a file to the server.
  • init() sets up the component properties and user interface elements, and assigns event listeners to those components. In addition, init() initializes the FileReference, FileRefernceList, and URLRequest objects.
  • browseFiles() triggers _fileref.browse(_filefilter) and opens the Browse for Files dialog box.
  • uploadFiles() loops through the ArrayCollection _files. For each loop, a new FileReference object is created and uploaded to the server.
  • removeSelectedFileFromCue() removes a single, currently selected file in the DataGrid from the _files ArrayCollection.
  • clearFileCue() removes all files from the _file ArrayCollection.
  • cancelFileIO() cancels a file upload in progress.
  • bytesToKilobytes() is a label function that converts bytes into kilobytes for the DataGrid.
  • getByteCount() sets the ProgressBar's label with data about the cue and current upload.
  • checkFileSize() checks each file added to the _files ArrayCollection against the permissible maximum file size allowance.
  • resetProgressBar() resets the ProgressBar's values back to its initial state.
  • resetForm() resets all form elements back to their initial states and values.
  • popDataGrid() calls getByteCount() and checkCue() when the _files ArrayCollection changes.
  • checkCue() controls the enabled states of the applications Button controls.
  • setupCancelButton() toggles the upload button control to act as the cancel button during a file upload in progress.
  • selectHandler() is an event handler that is triggered after a file is browsed and selected for the upload cue. This event handler eliminates files that exceed the maximum file size from being added to the _files ArrayCollection. When a file is removed because its size is illegal, an Alert box appears, warning the user.
  • progressHandler() is an event handler that is triggered during a file upload in progress. The result of the handler sets the ProgressBar's progress based on how many bytes are uploaded and the file's total bytes.
  • completeHandler() is an event handler that specifies when a file has finished uploading. This handler also checks the length of the _files ArrayCollection to determine if the cue is empty and dispatches a Complete Event if the length is zero. In this application, the dispatched Complete Event triggers a sound effect that alerts the user if their batch of files has uploaded successfully.
  • ioErrorHandler() is an event handler that is triggered when an I/O Error occurs. This event handler creates an alert window containing the error message.
  • securityErrorHandler() is an event handler that is triggered if a Security Error occurs. This event handler creates an alert window containing the error message.
  • httpStatusHandler() is an event handler that is triggered when an HTTP status code is returned to the application from the server. An HTTP code of 200 is the equivalent to the Event.Complete event sent from the _file FileReference.

Where to go from here

The combination of Flex 2, ColdFusion, and Flash Player allows you to create some very complete interfaces for handling file I/O to and from your server. You can build this example into your own full-blown Flex 2 application or create a custom applet to be included into traditional HTML forms, replacing the problematic JavaScript for client-side file validation. To do this, you might try the Flex-Ajax Bridge and FlashVars.

Page 3 of 3

Previous Page