Shan's Simple Examples: File uploads with Flex and ColdFusion
Someone in #flex was talking about how there were no good examples for doing uploads with Flex and ColdFusion. Sounded like an excellent topic to cover here. Now this example is a tiny bit more complex than previous examples, because I needed to cover two methods of functionality: single file uploads and multi-file uploads. Both processes are very similar, and in my code they actually share a method.
Here's the MXML application:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private var myFileList:FileReferenceList;
private var myFile:FileReference;
private var uploadTarget:URLRequest = new URLRequest("upload.cfm");
private function init():void {
myFileList = new FileReferenceList();
myFileList.addEventListener(Event.SELECT,fileListSelected);
myFile = new FileReference();
myFile.addEventListener(Event.SELECT,fileSelected);
}
private function fileListBrowse():void {
// we only want to allow images to be uploaded var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.jpeg");
myFileList.browse([imagesFilter]);
}
private function fileBrowse():void {
// we only want to allow images to be uploaded var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.jpeg");
myFile.browse([imagesFilter]);
}
private function fileListSelected(e:Event):void {
// here we could do whatever we want, but we're just going to // upload right away uploadFromList();
}
private function fileSelected(e:Event):void {
// here we could do whatever we want, but we're just going to // upload right away uploadFile(myFile);
}
private function uploadFromList():void {
if (myFileList.fileList.length > 0) {
// if there are still files left to upload, continue myFile = myFileList.fileList[0] as FileReference;
uploadFile(myFile);
} else {
// if there are no more files, stop return;
}
}
// NOTE: this method is used for one or multiple files private function uploadFile(f:FileReference):void {
// here we build out the other form items var urlVars:URLVariables = new URLVariables();
urlVars.myFirstValue = 1;
urlVars.myOtherValue = "something else";
// add the form items to the request uploadTarget.data = urlVars;
// set request the method to POST uploadTarget.method = URLRequestMethod.POST;
// add the event listeners // DataEvent.UPLOAD_COMPLETE_DATA only fires if data is returned and the flash player supports it // otherwise, use Event.COMPLETE f.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA,onDataComplete);
f.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
f.addEventListener(ProgressEvent.PROGRESS, progressHandler);
// show the progress bar myProgress.visible = true;
// start the upload f.upload(uploadTarget,"myUploadFieldName");
}
private function ioErrorHandler(e:IOError):void {
// there was some error, you'll want to tell someone Alert.show("Error occured, oops!","I/O Error");
}
private function progressHandler(e:ProgressEvent):void {
// update the ProgressBar myProgress.setProgress(e.bytesLoaded,e.bytesTotal);
}
private function onDataComplete(e:DataEvent):void {
// here we could handle whatever was returned by the server. XML is probably your best bet. // var myResult:XML = XML(e.data); // would work for XML var myResult:String = e.data;
// if there were multiple files, delete the one we uploaded and try another if (myFileList.fileList.length > 1) {
// remove what we just uploaded myFileList.fileList.splice(0,1);
// go upload another another uploadFromList();
} else {
// if this was the last of a multiple file upload, remove it if (myFileList.fileList.length > 0) {
myFileList.fileList.splice(0,1);
}
// we're done uploading myProgress.visible = false;
return;
}
}
]]>
</mx:Script>
<mx:VBox height="100%" width="100%" horizontalAlign="center" verticalAlign="middle">
<mx:Button label="Choose One File to Upload..." click="fileBrowse()"/>
<mx:Button label="Choose Multiple Files to Upload..." click="fileListBrowse()"/>
<mx:ProgressBar id="myProgress" mode="manual" label="Uploading" visible="false"/>
</mx:VBox>
</mx:Application>
The comments point out all the nuances you need to know about. It does the major features, including passing more data with the file, what you can do with the progress event, how to do an upload queue, rather than uploading all selected files at the same time, and how to handle responses from the upload script. This code will work with any backend processor, not just ColdFusion.
Here's the ColdFusion file:
<!--- this will upload the file --->
<cffile action="upload" fileField = "myUploadFieldName" destination="#expandPath("./")#uploads/">
<!--- note that all formfields including FORM.myFirstValue and FORM.myOtherValue --->
<cfscript>
myVal1 = FORM.myFirstValue;
myVal2 = FORM.myOtherValue;
</cfscript>
<!--- here you can send stuff back to flex, only if the flash player is 9.0.28.0 or later --->
<cfoutput><myXML>
<file uploadedAs="#cffile.serverFile#">
</myXML></cfoutput>
It doesn't do much, but you can see how to get non-file data passed from flex, and how to send a response. Make sure that, when sending a response, you don't send any whitespace before what you intend to send back to Flex. Also, note that your users need the Flash Player version 9.0.28.0 or later in order to send responses back to flex.
