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