FileReference in Flash Player 10

In previous versions of Flash Player, when a user selects a file from his machine for uploading, developers had to send the file to the server and get it back to access the data in the file selected. In Flash Player 10, developers can access the File data selected by the user without a round trip to the server. This is an amazing enhancement. Adobe Rocks !!!

You can allow users to select a file and do all manipulations on the client (Flash Player) and let your user save it back to his system instead of sending the file to the server and processing it on the server.

One more change to the FileReference class in Flash Player 10. The FileReference object methods browse, download, and save and the FileReferenceList.browse method will succeed only when called from within an ActionScript function that is the result of a user-initiated action. Find more details at this URL http://www.adobe.com/devnet/flashplayer/articles/fplayer10_uia_requirements.html?devcon=f2

I created a very simple sample which shows the changes mentioned above.

First you will have to configure your Flex Builder to target to Flash Player 10 and also use the new player APIs. This is very simple. Please follow the steps in this URL http://opensource.adobe.com/wiki/display/flexsdk/Targeting+Flash+Player+10+Beta

First lets see how we can load and modify the file on the client.

Loading and saving file

First invoke the FileReference.browse() function and let the user select the file. Once the file selected event is invoked you should invoke FileReference.load() function to load the file into memory. Once loaded, it’s all yours in the sample I am allowing user to select a file and then loading the same and displaying it in a TextArea.

Download the source code from here http://sujitreddy.g.googlepages.com/FileRefSample.mxml

Try sample at this URL http://www.sujitreddyg.com/samples/filereferencesample/FileRefSample.html

Few functions in the source file are explained below.

Loading the file

In the function below, calling FileReference.browse() will pop up a window for user to select a file.

private function browseFile():void{

fileRef = new FileReference();

fileRef.addEventListener(Event.SELECT, onFileSelected);

……(more)

var textTypeFilter:FileFilter = new FileFilter(“Text Files (*.txt)”,”*.txt”);

try{

fileRef.browse([textTypeFilter]);

}catch(err:Error){logData(err.message);}

}

Function below will be invoked when the user selects the file. You can see that we are invoking the load() function and are waiting for the load to complete.

private function onFileSelected(event:Event):void{

fileRef.addEventListener(ProgressEvent.PROGRESS, onProgress);

fileRef.addEventListener(Event.COMPLETE, onComplete);

//this is where we load the file into memory

fileRef.load();

}

In the onComplete handler function, you can access the data using the FileReference object’s data property as shown in the source file attached.

Saving the file

In the sample we are displaying the data in the file in a TextArea. You can modify the data and then click on the save button. The save button will invoke the function below.

public function saveFile():void{

saveFileRef = new FileReference();

saveFileRef.addEventListener(Event.SELECT, onSaveFileSelected);

//this will throw a window for user to select the location

//and file name to save. Second argument is the default name

saveFileRef.save(fileDataBox.text,fileRef.name);

}

That’s all you need to do

Other change as mentioned above is that you can invoke the browse/upload and other methods as described in the URL above only on user generated events like button click. In the sample I tried invoking a function on creationComplete event to popup a file selection popup using the browse() function. You can see that the call fails as creationComplete is not a user invoked event.

The same function is invoked on click of a button and it works perfectly. Please check attached code.