File Upload in Flex/Flash in Internet Explorer

Last updated on Apr 27, 2021 | Also applies to Flash Professional

Because Macromedia Flash doesn't include the capability to upload files, a Macromedia Flex developer will need to use multiple technologies to add uploading functionality to their Flex application. The following items are required to upload files from Flex applications.

Client-side
- Main Flex-generated SWF inside of Flash Player in browser
- JavaScript to communicate between browser frames
- HTML form for the actual uploading
Server-side
- ColdFusion MX, JSP, PHP, ASP or a similar technology for receiving and placing the uploaded file on the server

The example provided in this TechNote also uses a frame that wraps a Flex application that wraps a LocalConnection object to simplify inter-frame communication.

Overview

This example includes five files that work together to enable file upload from Internet Explorer on Windows or Mac OS X. It also includes instructions for installing on Flex and ColdFusion servers.

Download the example files (5K).

Steps

Open upload.cfm for editing.
Set the destination attribute incffile to the path you'd like the uploaded files to be stored in.
Save the changes to the file.
Copy upload.cfm to your ColdFusion Server.
Open one of the index.jsp pages for editing (hidden_index.jsp or sample_index.jsp).
Set the uploadURL attribute to point to the URL of the upload.cfm page.
Copy the JSP and MXML files to your Flex Server.
View the compiled application:

To see all IFRAMES:http://path.to.server/flexInstance/sample_index.jsp

To hide the extra IFRAMES:http://path.to.server/flexInstance/hidden_index.jsp

Files:

Flex Server

sample_index.jsp or hidden_index.jsp
- Wraps main view
- Contains
  - other frames as iframes
  - core ActionScript handlers and methods for interframe communication
index.mxml
- Contains
  - application UI
  - glue-code to communicate with JavaScript
  - LocalConnection to communicate between frames
uploadConnect.jsp (will be hidden frame in production)
- Wraps uploadConnect application
- Used for messaging from JavaScript to Flex
- Each time this JSP is reloaded, uploadConnect.mxml sends a message on its LocalConnection
uploadConnect.mxml (will be hidden in production)
- Wraps LocalConnection
- Only functionality is sending message to all listeners on LocalConnection with values set in wrapping JSP at initialization

ColdFusion server (this can be replaced by other server-side technology for handling upload)

upload.cfm
- Contains
  - HTML form
  - ColdFusion code that handles actual uploading of file

Notes:

This was written and tested on Internet Explorer on Windows and Mac OS-X.
This does not work with Opera, Netscape or Mozilla.

Get help faster and easier

New user?