Flex Examples

The previous example, “Using the URLVariables and FileReference classes to pass data from Flex to a server-side script”, showed how you could use the upload() method in the FileReference class along with the URLRequest and URLVariables classes to send data from your Flex application to a server-side script. Well, what happens if you want to send data from your server-side script back to your Flex application? Say hello to the uploadCompleteData event! This event gets dispatched after data is received from the server after a successful upload.

The uploadCompleteData event is not dispatched if data is not returned from the server.

The following example shows how you can set up an event listener for the uploadCompleteData event to display information about the file upload.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/30/using-for-the-filereference-classs-uploadcompletedata-event-to-capture-data-from-a-server-side-script/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import flash.net.FileReference;
            import mx.controls.Alert;
            import mx.utils.StringUtil;

            private var fileRef:FileReference;
            private var urlReq:URLRequest;

            private function init():void {
                fileRef = new FileReference();
                fileRef.addEventListener(Event.SELECT, fileRef_select);
                fileRef.addEventListener(Event.COMPLETE, fileRef_complete);
                fileRef.addEventListener(IOErrorEvent.IO_ERROR, fileRef_ioError);
                fileRef.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, fileRef_uploadCompleteData);

                urlReq = new URLRequest();
                urlReq.url = "http://localhost:8300/fileref/uploader.cfm";
            }

            private function fileRef_uploadCompleteData(evt:DataEvent):void {
                var strData:String = StringUtil.trim(evt.data);
                var vars:URLVariables = new URLVariables(strData);
                Alert.show(vars.fileName, "fileName");
            }

            private function start():void {
                fileRef.browse();
            }

            private function fileRef_select(evt:Event):void {
                fileRef.upload(urlReq);
            }

            private function fileRef_complete(evt:Event):void {
                Alert.show(evt.toString(), evt.type);
            }

            private function fileRef_ioError(evt:IOErrorEvent):void {
                Alert.show(evt.text, evt.type);
            }
        ]]>
    </mx:Script>

    <mx:Button label="upload" click="start();" />

</mx:Application>

View source

The previous example just uploads to http://localhost/ (in my case my local JRun server). Since that is pretty much useless 99.8% of the time, you would need to change that URL to your ColdFusion/PHP/ASP/Java upload script on your own server.

If you’re a ColdFusion’er, you can see my upload script in the previous entry, “Using the URLVariables and FileReference classes to pass data from Flex to a server-side script”. Note that the script has the following lines, which return some name/value pairs to our Flex application. Flex will receive the data as a string, but you can easily convert the string into a URLVariables object by passing the string to the URLVariables constructor, or by using the URLVariables class’s decode() method. Once converted, Flex will have access to two variables from the ColdFusion script, fileName and fileSize. The fileName variable contains the name of the uploaded file from the server. Since the ColdFusion <cffile /> tag used a nameConflict attribute of “MAKEUNIQUE”, the server will generate a unique file name if a file by that name already exists in the specified directory. The fileSize variable contains the sie of the upload file from the server. Also, note that unlike ActionScript, ColdFusion is not case sensitive.

<cfoutput>fileName=#CFFILE.serverFile#&fileSize=#CFFILE.fileSize#</cfoutput>