Flex Examples
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”.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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
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?
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!
Mason,
This should now be possible in Flash Player 10 using the FileReference class’s new
load()method (I’m not sure if it’s available in newer versions of Flash Player 9). For a rough example, see “Previewing an image before uploading it using the FileReference class in Flash Player 10″.Peter
Ces explications m’ont “débloquées”. Merci!
Thanks. Could not find how to upload data along with file. You made it easy.
Is it possible to use Django to upload the files instead of ColdFusion?????
Squeral,
Sorry, I’ve never used django. You could try asking on FlexCoders and see if anybody there has tried.
Peter
I have been looking for a solution to upload multiple files using Flex and Django but haven’t got any luck yet… :(
Turns out it was easier then I thought… :)
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~
How do I upload it on my server with ColdFusion. The combination of ColdFusion and Flex 4.
THX
@Marylka,
There should be a simple example in the comments at “Uploading files in Flex using the FileReference class”.
Peter
Great post, I read it twice.