File Downloader Control in Flex

The following example downloads a ZIP file using Flash Player’s FileReference class (flash.net.FileReference) 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>

Output:-