File Upload with ColdFusion Flash Forms

At last! File upload was, in my opinion, one of the most important missing features for Flash RIAs to be taken seriously. One of the reasons we couldn’t reproduce HTML forms with Flash CFForm was the file upload. But now that the new Flash Player has file I/O features, we can use it to incorporate them to Flash forms, and make it even better than regular file upload, with more user feedback such as progress bars. As you may expect, you need the Flash Player 8 to run this example. In the zip file you will find a custom tag, an example, and a swf file.

We have implemented most of the I/O methods provided by the new API, and use them to add a progress bar and some progress information such as percentage and total bytes uploaded.

The custom tag consists of two tags, an enclosing cf_flashUpload, and an inner tag, cf_flashUploadInput.

This is the simplest example on how to use the custom tag, with default values:

A more complex example would be:

flashUpload Usage:
Attributes:

• name: Required; Name of the text input that will contain the name of the file to upload
• actionFile: Required; File that will handle the upload. It can include query string variables to identify this file. Example: upload.cfm?id=15
• label: Label to put next to the control.
• fileTypes: extensions to accept, separated by semicolons. Example: *.jpg;*.png;*.gif
• fileDescription: Text to describe accepted files
• maxSize: maximum file size in Kb to upload. Defaults to no limit
• swf: name of the swf file that contains the i/o libraries. Only needed if your swf is not in the same dir as your cfform

flashUploadInput Usage:
Attributes:

• inputWidth: with of the text input where file name is shown
• buttonStyle: style applied to choose and upload buttons
• uploadButton: true/false, default true. Adds an upload button. If you set it false, you must put the generated variable called “theNameOfYourInput_uploadScript” in some other button (“theNameOfYourInput” is the name assigned in the flashUpload tag name attribute)
• progressBar: true/false default true. Adds a progress bar.
• progressInfo: true/false default true. Adds an output area to show progress info
• progressBarStyle: style of progress bar
• uploadButtonLabel: label of “Upload” button
• chooseButtonLabel: label of “File browse” button

Notes on error codes:

404: As you may know, 404 means "file not found". As such, it means that the address you are sending the upload to does not exist or it cannot be found by the web server. You will need to make sure you are pointing the "actionFile" attribute to the right place. When in doubt, try using an absolute path (ie: /myuploads/directory/upload.cfm)

500: This error could be due to many things, but it is an "Internal server error". Issues to check:
- You are uploading files larger than the allowed post size set in the CF administrator. See the setting "Maximum size of post data" in the Settings page of the CF administrator. The default I think is 100MB
- You are uploading large files and CF is running out of memory. CF has to put the whole size in memory while it gets uploaded before it saves it to disk. If you have access to the logs (the java output logs, not the regular cf logs), check for this error.

A couple of notes from the comments:

Posting additional data: handling a file upload posted by Flash is different than handling an upload posted by an html form. The first difference is that you cannot specify the name of the file input, it will always be "FileData". The second difference is that when you trigger the file upload, you are only sending the file contents and the file name, but cannot send anything else, whether it was in the form you have or not. That is, on your "form" scope in upload.cfm, you will only see those two fields. The only data you can send is what you append to the upload action file name query string (ie: upload.cfm?variable1=test), and you will get that in the URL scope of upload.cfm.

Getting data back from the upload action page: The only things you will get from the upload action page are HTTP status codes. 200 will mean the upload was successful (or that at least there was no server error). If you change the file name, make a query to retrieve anything (ie: an id), you will not be able to send that back to the calling page. You can do any of that, for example if you wanted to send an email after a file was uploaded, or resize the image you uploaded, as this is a normal cfm page, but you cannot communicate any of this to the calling page.
An update on this: If your user is running player 9.0.28, you could get information back from the upload action page. You will have to, however, change the .fla that implements the uploading. See the docs.

View live example (please be gentle with our bandwidth)
Download the source