Using the URLVariables and FileReference classes to pass data from Flex to a server-side script

We’ve already seen examples of using Flex to upload and download files (see “Uploading files in Flex using the FileReference class” and “Downloading files in Flex using the FileReference class”), but I’ve seen a lot of bugs/questions centering around the FileReference class lately so thought I’d try and do another example or two.

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”.

14 thoughts on “Using the URLVariables and FileReference classes to pass data from Flex to a server-side script

  1. Thanks for the article.
    I have used it to build a similar application in Flash CS3 that has a form for user info as well as a picture. One thing i can’t work out is how to return data back from the post. Is it possible?
    I would like to return a string that i can use to determine the outcome of the post.

    Cheers

  2. Just spotted the uploadCompleteData event :)

    This is great, however an issue i have is that my uploaded file for the form is not obligatory so i have to make two separate calls to the same server page. One with fileReference and one with URLLoader() based on a bool toggled from the fileRefernce SELECT event unless you can think of a better way?

  3. Anyway to parse the file, and store as text variable; Without having to send it a script for the heavy lifting (negate the need to push to remote server at all).

    I need to be able to browse local machine, pull in file and parse contents, storing into variable.

    thx in advance!

  4. I have been looking for a solution to upload multiple files using Flex and Django but haven’t got any luck yet… :(

  5. I Just did a upload function, save file service can access anonymously. and save file to a special folder such as “d:\temp”. the all work fine in FireFox,Safari.but IE. the always pop-up login window in IE. whether input right or wrong password,the procedure will failed.

    (while I open Fiddler to listen HTTP, the upload becomes OK in IE)

    May some errors?

    Thanks very much~

Comments are closed.