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>

 

The following example shows how you can use a combination of the URLVariables, URLRequest, and FileReference classes to pass GET or POST variables to a server-side script while doing a file upload. In this example, we just happen to pass a simple text userID and the user’s Flash Player version, but it should be easy enough to modify the script slightly to pass more unique information to the server (such as a unique user token stored in a SharedObject or a browser cookie). I also added a crude little timer on the example to make it a bit classier.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/30/using-the-urlvariables-and-filereference-classes-to-pass-data-from-flex-to-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 flash.net.URLRequestMethod;
            import mx.controls.Alert;
            import mx.utils.StringUtil;
 
            private var fileRef:FileReference;
            private var urlVars:URLVariables;
            private var urlReq:URLRequest;
            private var startTimer:Number;
            private var timer:Timer;
 
            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);
 
                urlVars = new URLVariables();
                urlVars.userID = 94103;
                urlVars.fpVersion = flash.system.Capabilities.version;
 
                urlReq = new URLRequest();
                urlReq.method = URLRequestMethod.POST;
                urlReq.data = urlVars;
                urlReq.url = "http://localhost:8300/fileref/uploader.cfm";
 
                timer = new Timer(100);
                timer.addEventListener(TimerEvent.TIMER, onTimer);
            }
 
            private function onTimer(evt:TimerEvent):void {
                lbl.text = String(getTimer() - startTimer) + " ms";
            }
 
            private function start():void {
                fileRef.browse();
            }
 
            private function fileRef_select(evt:Event):void {
                fileRef.upload(urlReq);
                startTimer = getTimer();
                timer.start();
            }
 
            private function fileRef_complete(evt:Event):void {
                Alert.show(evt.toString(), evt.type);
                timer.stop();
            }
 
            private function fileRef_ioError(evt:IOErrorEvent):void {
                Alert.show(evt.text, evt.type);
                timer.stop();
            }
        ]]>
    </mx:Script>
 
    <mx:Button label="upload" click="start();" />
    <mx:Label id="lbl" />
 
</mx:Application>

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, here’s the script that I use to upload files:

<cfsilent><cfsetting enablecfoutputonly="true" />
<cfset req = getHTTPRequestData( )>
 
<cffile action="UPLOAD" filefield="Filedata" destination="#ExpandPath('.')#" nameconflict="MAKEUNIQUE">
<cfsavecontent variable="info">
<html>
<head></head>
<body>
<cfdump label="CFFILE" var="#cffile#">
<cfdump label="getHTTPRequestData()" var="#req#">
<cfif IsDefined("FORM")>
    <cfdump label="FORM" var="#FORM#">
</cfif>
<cfif IsDefined("URL")>
    <cfdump label="URL" var="#URL#">
</cfif>
</body>
</html>
</cfsavecontent>
 
<cffile action="WRITE" file="#ExpandPath('./')##cffile.serverFileName#.dump.html" output="#info#" addnewline="Yes">
</cfsilent><cfsetting enablecfoutputonly="false" />
<cfcontent reset="true" />
<cfoutput>fileName=#CFFILE.serverFile#&fileSize=#CFFILE.fileSize#</cfoutput>

It’s a pretty handy script as it not only uploads the file to the server (which is kind of the point), but it also creates a separate HTML file for each upload which tells me things like file names, file size, content length, content type, user agent (“Shockwave Flash”, if you’re curious as to what Flash Player uses for a user agent). It even correctly logs the parameters I passed from Flex to ColdFusion using URLVariables (userID and fpVersion).

For an example of sending variables from a server-side script back to your Flex application after a file upload, see “Using for the FileReference class’s uploadCompleteData event to capture data from a server-side script”.

 

If you want to allow users to upload multiple files at once, you would use the FileReferenceList class instead of FileReference.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/21/uploading-files-in-flex-using-the-filereference-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            private var fileRef:FileReference;

            private const FILE_UPLOAD_URL:String = "http://www.YOUR-WEBSITE-HERE.com/fileref/uploader.cfm";

            private function init():void {
                fileRef = new FileReference();
                fileRef.addEventListener(Event.SELECT, fileRef_select);
                fileRef.addEventListener(ProgressEvent.PROGRESS, fileRef_progress);
                fileRef.addEventListener(Event.COMPLETE, fileRef_complete);
            }

            private function browseAndUpload():void {
                fileRef.browse();
                message.text = "";
            }

            private function fileRef_select(evt:Event):void {
                try {
                    message.text = "size (bytes): " + numberFormatter.format(fileRef.size);
                    fileRef.upload(new URLRequest(FILE_UPLOAD_URL));
                } catch (err:Error) {
                    message.text = "ERROR: zero-byte file";
                }
            }

            private function fileRef_progress(evt:ProgressEvent):void {
                progressBar.visible = true;
            }

            private function fileRef_complete(evt:Event):void {
                message.text += " (complete)";
                progressBar.visible = false;
            }
        ]]>
    </mx:Script>

    <mx:NumberFormatter id="numberFormatter" />

    <mx:Button label="Upload file"
            click="browseAndUpload();" />
    <mx:Label id="message" />
    <mx:ProgressBar id="progressBar"
            indeterminate="true"
            visible="false" />

</mx:Application>

View source

You’ll notice the previous example doesn’t have a SWF or file upload URL. That would be because I don’t want all of you uploading files to my server. :)

In the previous example, I wrapped the call to fileRef.size in a try..catch block. In ActionScript 3.0, Flash Player throws an error if you attempt to get the size of a zero-byte file.