Flex Examples » FileReference

Previewing an image before uploading it using the FileReference class in Flash Player 10

Peter deHaan — Tue, 26 Aug 2008 04:38:04 +0000

The following example shows how you can browse for an image file from your local file system and preview the image before uploading it to a remote webserver by using the FileReference class’s new load() method in Flash Player 10. Once the user has browsed and selected an image from their local machine, you can call the load() method which dispatches a complete event when the image has successfully loaded, at which point you can display the image using a Flex Image control and setting the Image instance’s source property to the FileReference class’s data property (which is a ByteArray).

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

"1.0" encoding="utf-8"?>

 name="FileReference_load_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        xmlns:net="flash.net.*">
 
    >
        [CDATA[
            import mx.controls.Alert;
            import mx.utils.ObjectUtil;
 
            private function btn_click(evt:MouseEvent):void {
                var arr:Array = [];
                arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
                fileReference.browse(arr);
            }
 
            private function fileReference_select(evt:Event):void {
                fileReference.load();
            }
 
            private function fileReference_complete(evt:Event):void {
                img.source = fileReference.data;
                Alert.show(ObjectUtil.toString(fileReference));
            }
        ]]>
    >
 
    >
         id="fileReference"
                select="fileReference_select(event);"
                complete="fileReference_complete(event);" />
    >
 
     id="panel"
            layout="absolute"
            horizontalCenter="0"
            verticalCenter="0"
            width="500"
            height="300">
         id="img"
                verticalCenter="0"
                horizontalCenter="0"
                maxWidth="200"
                maxHeight="200" />
        >
             id="btn"
                    label="Browse and preview..."
                    click="btn_click(event);" />
             label="Upload..."
                    enabled="false" />
        >
    >
 
>

View source is enabled in the following example.

For more information on the new FileReference capabilities in Flash Player 10, see the Flex Gumbo documentation at http://livedocs.adobe.com/flex/gumbo/langref/flash/net/FileReference.html.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

Saving files locally using the FileReference class’s save() method in Flash Player 10

Peter deHaan — Tue, 26 Aug 2008 04:18:14 +0000

The following example shows how you can use the FileReference class’s new save() method in Flash Player 10 to save text, XML, and image files to a user’s hard drive.

"1.0" encoding="utf-8"?>

 name="FileReference_save_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:net="flash.net.*"
        creationComplete="init();">
 
    >
        [CDATA[
            private function init():void {
                textArea.text = describeType(FileReference).toXMLString();
            }
 
            private function btn_click(evt:MouseEvent):void {
                fileReference.save(textArea.text, "describeType.txt");
            }
        ]]>
    >
 
    >
         id="fileReference" />
    >
 
     id="panel"
            width="500" height="300"
            verticalCenter="0" horizontalCenter="0">
        >
             id="btn"
                    label="Save Text"
                    click="btn_click(event);" />
        >
         id="textArea"
                editable="true"
                width="100%"
                height="100%" />
    >
 
>

View source is enabled in the following example.

You can also pass the XML object directly to the FileReference class’s save() method, as seen in the following example:

"1.0" encoding="utf-8"?>

 name="FileReference_save_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:net="flash.net.*"
        creationComplete="init();">
 
    >
        [CDATA[
            private const xmlObj:XML = describeType(FileReference);
 
            private function init():void {
                textArea.text = xmlObj.toXMLString();
            }
 
            private function btn_click(evt:MouseEvent):void {
                fileReference.save(xmlObj, "describeType.xml");
            }
        ]]>
    >
 
    >
         id="fileReference" />
    >
 
     id="panel"
            width="500" height="300"
            verticalCenter="0" horizontalCenter="0">
        >
             id="btn"
                    label="Save"
                    click="btn_click(event);" />
        >
         id="textArea"
                editable="true"
                width="100%"
                height="100%" />
    >
 
>

Or, you can use the ImageSnapshot class to take a screenshot of an item on the display list and save it to the user’s hard drive by passing a ByteArray object to the FileReference class’s save() method, as seen in the following example:

"1.0" encoding="utf-8"?>

 name="FileReference_save_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:net="flash.net.*"
        creationComplete="init();">
 
    >
        [CDATA[
            import mx.graphics.ImageSnapshot;
            import mx.graphics.codec.*;
 
            private const jpegEnc:JPEGEncoder = new JPEGEncoder();
            private const xmlObj:XML = describeType(FileReference);
 
            private function init():void {
                textArea.text = xmlObj.toXMLString();
            }
 
            private function btn_click(evt:MouseEvent):void {
                var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(panel, 0, jpegEnc);
                fileReference.save(imageSnap.data, "describeType.jpg");
            }
        ]]>
    >
 
    >
         id="fileReference" />
    >
 
     id="panel"
            width="500" height="300"
            verticalCenter="0" horizontalCenter="0">
        >
             id="btn"
                    label="Save"
                    click="btn_click(event);" />
        >
         id="textArea"
                editable="true"
                width="100%" height="100%" />
    >
 
>

View source is enabled in the following example.

For more information on the new FileReference capabilities in Flash Player 10, see the Flex Gumbo documentation at http://livedocs.adobe.com/flex/gumbo/langref/flash/net/FileReference.html.

Creating a FileReference object using MXML in Flex

Peter deHaan — Mon, 25 Aug 2008 14:16:03 +0000

The following example shows how you can define a FileReference object in MXML by defining a custom namespace for the flash.net package.

Full code after the jump.

View MXML

View source is enabled in the following example.

Using for the FileReference class’s uploadCompleteData event to capture data from a server-side script

Peter deHaan — Wed, 31 Oct 2007 05:57:30 +0000

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





    
        "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);
            }
        ]]>

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

fileName=#CFFILE.serverFile#&fileSize=#CFFILE.fileSize#

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

Peter deHaan — Wed, 31 Oct 2007 02:00:11 +0000

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.

"1.0" encoding="utf-8"?>

 xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    
        
            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();
            }
        ]]>
    
 
     label="upload" click="start();" />
     id="lbl" />
 
>

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

Uploading files in Flex using the FileReference class

Peter deHaan — Sat, 22 Sep 2007 03:28:38 +0000

In an earlier example we looked at “Downloading files in Flex using the FileReference class“, but It looks like we haven’t ever looked at file uploads.
The following example shows how you can use the FileReference class’s browse() method to allow users to select and upload a single file to a Web server.

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





    
        "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;
            }
        ]]>

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.

Downloading files in Flex using the FileReference class

Peter deHaan — Sat, 28 Jul 2007 17:20:53 +0000

OK, enough embedding examples, lets take a look at downloading files using Flash Player’s FileReference class (flash.net.FileReference). This example demonstrates a basic usage of the FileReference class within Flex, allowing users to download a file from the server. This example also shows how you can use data tips in the DataGrid control by setting the data grid column’s showDataTips property to true and specifying a value for the dataTipField column.

Full code after the jump.

The following example downloads a ZIP file when the user presses the Button control. You can mouse over the items in the DataGrid control’s “Type” column to see additional event information.

Download source (ZIP, 3K) | View MXML

"1.0" encoding="utf-8"?>

 xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    
        
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
            import flash.net.FileReference;
 
            [Bindable]
            [Embed('assets/disk.png')]
            private var diskIcon:Class;
 
            [Bindable]
            private var arrColl:ArrayCollection;
 
            /* URL of the file to download. */
            private const FILE_URL:String = "http://blog.flexexamples.com/wp-content/uploads/FileReference_download_test/bin/srcview/FileReference_download_test.zip";
 
            private var fileRef:FileReference;
            private var urlReq:URLRequest;
 
            private function init():void {
                /* Initialize the array collection to an empty collection. */
                arrColl = new ArrayCollection();
 
                /* Set up the URL request to download the file specified by the FILE_URL variable. */
                urlReq = new URLRequest(FILE_URL);
 
                /* Define file reference object and add a bunch of event listeners. */
                fileRef = new FileReference();
                fileRef.addEventListener(Event.CANCEL, doEvent);
                fileRef.addEventListener(Event.COMPLETE, doEvent);
                fileRef.addEventListener(Event.OPEN, doEvent);
                fileRef.addEventListener(Event.SELECT, doEvent);
                fileRef.addEventListener(HTTPStatusEvent.HTTP_STATUS, doEvent);
                fileRef.addEventListener(IOErrorEvent.IO_ERROR, doEvent);
                fileRef.addEventListener(ProgressEvent.PROGRESS, doEvent);
                fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, doEvent);
            }
 
            private function doEvent(evt:Event):void {
                /* Create shortcut to the FileReference object. */
                var fr:FileReference = evt.currentTarget as FileReference;
 
                /* Add event order and type to the DataGrid control. */
                arrColl.addItem({data:arrColl.length+1, type:evt.type, eventString:evt.toString()});
 
                try {
                    /* Update the Model. */
                    fileRefModel.creationDate = fr.creationDate;
                    fileRefModel.creator = fr.creator;
                    fileRefModel.modificationDate = fr.modificationDate;
                    fileRefModel.name = fr.name;
                    fileRefModel.size = fr.size;
                    fileRefModel.type = fr.type;
                    /* Display the Text control. */
                    txt.visible = true;
                } catch (err:*) {
                    /* uh oh, an error of sorts. */
                }
            }
 
            private function downloadSourceCodeZip():void {
                /* Clear existing array collection. */
                arrColl = new ArrayCollection();
                /* Hide the Text control. */
                txt.visible = false;
                /* Begin download. */
                fileRef.download(urlReq);
            }
 
            private function showAlert(item:Object):void {
                Alert.show(item.eventString, item.type);
            }
        ]]>
    
 
     id="fileRefModel">
        >
            >{""}>
            >{""}>
            >{""}>
            >{""}>
            >{""}>
            >{""}>
        >
    >
 
     id="downloadBtn"
            label="Download example source code"
            icon="{diskIcon}"
            click="downloadSourceCodeZip();"
            toolTip="{FILE_URL}"
            height="40" />
 
     id="debug"
            dataProvider="{arrColl}"
            width="{downloadBtn.width}"
            rowCount="5"
            rowHeight="22"
            itemClick="showAlert(event.currentTarget.selectedItem)">
        >
             dataField="data"
                    headerText="#"
                    width="20" />
             dataField="type"
                    headerText="Type"
                    showDataTips="true"
                    dataTipField="eventString" />
        >
    >
 
     id="txt" condenseWhite="true" visible="false">
        >
            creationDate: {fileRefModel.creationDate}
            creator: {fileRefModel.creator}
            modificationDate: {fileRefModel.modificationDate}
            name: {fileRefModel.name}
            size: {fileRefModel.size}
            type: {fileRefModel.type}
        >
    >
 
>

View source enabled in the following example.