Sample Flex File Upload Application

Recently I came across a thing where in I had to write a flex application which needs to upload file from the Client machine to Remote Application server, So I did some googling and came up with this simple demo application which explains most aspects of File upload functionality in Flex. I have tried to provide the inline comments in the below code to explain it. Refer http://livedocs.adobe.com/flex/2/langref/flash/net/FileReference.html for more information on Methods/events of FileReference package. Also, I found some cool multifile upload custom components but those were too complex for my need.

MXML/AS code of FileUpload:

---

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Alert;

// This is the main library package which provided APIs/Events for FileUpload

import flash.net.FileReference;

private var fileRef:FileReference = new FileReference();
private var fileTypes:Array = new Array();

//setup the filters (types of files to be browsed)

private var imageTypes:FileFilter = new FileFilter("Images (*.jpg; *.jpeg; *.gif; *.png)" ,"*.jpg; *.jpeg; *.gif; *.png");
private var documentTypes:FileFilter = new FileFilter("Documents (*.pdf), (*.doc), (*.rtf), (*.txt)",("*.pdf; *.doc; *.rtf, *.txt"));

// Set Up URLRequest

public var uploadURL:URLRequest = new URLRequest();

public function init():void
{
// This URL should be replaced with your server side URL

uploadURL.url = "http://localhost/CF/upload/upload.cfm";
uploadURL.method = "GET"; // OR "POST" as you need it
uploadURL.contentType = "multipart/form-data";

// Event Listeners for UI Buttons (Upload/Browse)

browsebutton.addEventListener(MouseEvent.CLICK, browseFiles);
uploadbutton.addEventListener(MouseEvent.CLICK,uploadFiles);
fileRef.addEventListener(Event.SELECT, selectHandler);


}

//Browse for files

private function browseFiles(event:Event):void
{
fileTypes.push(imageTypes);
fileTypes.push(documentTypes);
fileRef.browse(fileTypes);

}

// called after user selects a file form the browse window.

private function selectHandler(event:Event):void
{
FilePath.text = event.currentTarget.name.toString();
}

// called when user clicks on the Upload button to upload the file

private function uploadFiles(event:Event):void
{
fileRef.addEventListener(Event.COMPLETE, completeHandler);
fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,dataHandler);
fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR,securityErrorHandler);
fileRef.addEventListener(HTTPStatusEvent.HTTP_STATUS,httpStatusHandler);
fileRef.addEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);
fileRef.upload(uploadURL);
}

// called after a file is uploaded

private function completeHandler(event:Event):void
{
Alert.show("File Uploaded successfully");
}

//called after file upload is done and Data has been returned from Server

private function dataHandler(event:DataEvent):void
{
resultsTxtField.text = event.data.toString();
}

// called if there is an error detected by flash player browsing or uploading a file

private function ioErrorHandler(event:IOErrorEvent):void
{
mx.controls.Alert.show(String(event),"ioError",0);
}
// called if a security error

private function securityErrorHandler(event:SecurityErrorEvent):void
{
mx.controls.Alert.show(String(event),"Security Error",0);
}
// server will return an http status code, code 200 means all is good

private function httpStatusHandler(event:HTTPStatusEvent):void
{
if (event.status != 200)
{
mx.controls.Alert.show(String(event),"Error",0);
}
}
]]>
</mx:Script>

<mx:Panel title="File Uploader">
<mx:ControlBar>
<mx:Spacer width="100%"/>
<mx:HBox>
<mx:TextInput id="FilePath" width="50"/>
<mx:Button id="browsebutton" label="Browse File" />
<mx:Button label="UpLoad File" name="uploadbutton" id="uploadbutton" />
</mx:HBox>
<mx:TextArea id="resultsTxtField"/>
</mx:ControlBar>
</mx:Panel>

</mx:Application>


Code for [http://localhost/CF/upload/upload.cfm] would be something as below in case of ColdFusion

---

<cffile action="upload" destination="C:\Inetpub\wwwroot\uploadClientfilesHere\" accept="application/octet-stream" FILEFIELD="filedata" nameconflict="overwrite" >