Downloading files in Flex using the FileReference class

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/07/28/downloading-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[
            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);
            }
        ]]>
    </mx:Script>   

    <mx:Model id="fileRefModel">
        <file>
            <creationDate>{""}</creationDate>
            <creator>{""}</creator>
            <modificationDate>{""}</modificationDate>
            <name>{""}</name>
            <size>{""}</size>
            <type>{""}</type>
        </file>
    </mx:Model>   

    <mx:Button id="downloadBtn" label="Download example source code" icon="{diskIcon}" click="downloadSourceCodeZip()" toolTip="{FILE_URL}" height="40" />   

    <mx:DataGrid id="debug" dataProvider="{arrColl}" width="{downloadBtn.width}" rowCount="5" rowHeight="22" itemClick="showAlert(event.currentTarget.selectedItem)">
        <mx:columns>
            <mx:DataGridColumn dataField="data" headerText="#" width="20" />
            <mx:DataGridColumn dataField="type" headerText="Type" showDataTips="true" dataTipField="eventString" />
        </mx:columns>
    </mx:DataGrid>   

    <mx:Text id="txt" condenseWhite="true" visible="false">
        <mx:text>
        creationDate: {fileRefModel.creationDate}
        creator: {fileRefModel.creator}
        modificationDate: {fileRefModel.modificationDate}
        name: {fileRefModel.name}
        size: {fileRefModel.size}
        type: {fileRefModel.type}
        </mx:text>
    </mx:Text>   

</mx:Application>