Browsing and loading local files using FileReference class

UPDATE [24 May 2010]
I added a live demo to show hot the code works on the browser. Also I updated the zip file with the exact code that is working on the demo.
IMPORTANT, when publishing, you must target Flash Player 10+

Hi
One of the key features of the Flash Player 10 is de ability of accessing local and remote files through the FileReference object. You can browse on local files, download files from server, upload files and save files locally.
This can be useful when you are building an online or local tool that needs a file to be specified by the user. In this particular post we will use FileReference to allow the user to select an image and load it into the movie and this will set the basics for loading any kind of file.

Let’s start!
We need to create our FileReference instance and other support vars, in this case, a Bitmap and Loader objects. We will use the Loader class to parse the data loaded from FileReference.load function and the Bitmap class for final reference of the loaded image.

var myFileReference:FileReference = new FileReference();
var myBitmap:Bitmap;
var loader:Loader = new Loader();

The FileReference class follows a file loading pattern and a series of events are fired for every step through the load process. The first step is to call the FileReference.browse function that shows the open file dialog box, you select a file and then, the SELECT event fires upm now the FileReference object has the path to the file, now we call the FileReference.load function, when loading is complete it fires the COMPLETE event and now your data is available. So, we listen that basic events and call some functions

//listening the SELECT event
myFileReference.addEventListener(Event.SELECT,_onSelectEvent);
//COMPLETE event fires up when data is loaded and available
myFileReference.addEventListener(Event.COMPLETE, _onCompleteEvent);
function _onSelectEvent(e:Event):void {
trace("File is selected");
//once the file is selected, call the load function
myFileReference.load();
}

At this point, we can listen when we select a file and when the load is complete, the _onCompleteEvent function will continue the image loading, and we need to get the data loaded from the FileReference to parse it using the Loader class using the Loader.loadBytes function. The data we get from FileReference.data is a ByteArray format, that’s why we use Loader.loadBytes function. The Loader class will parse the data from ByteArray to a Bitmap kind, this is important to remark, we know that the parsed data is a Bitmap because we know that we are loading a bitmap, you may know what kind of files you are loading in order to determine how you will parse that data, we can add a file filter option to the FileReference.browse function to show specific file extensions.
Let’s finish the _onCompleteEvent adding a listener to the Loader instance we created before, this will let us know when the data is parsed and we will be following a pattern

function _onCompleteEvent(e:Event):void {
trace("Data Loaded !");
trace(myFileReference.type); //show our file extension
loader.loadBytes(myFileReference.data); //ByteArray magic
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,_onLoaderComplete);
}

Ok, we almost finish. Once the Loader finish parsing our data, the COMPLETE event fires and we can use the Loader.content property and cast it to Bitmap and finally add it to the stage

//the Loader finish parsing the data
function _onLoaderComplete(e:Event):void {
trace("parsing complete");
//cast the content property
myBitmap = Bitmap(loader.content);
//just  for info purposes
trace(myBitmap.width);
//add to the stage
addChild(myBitmap);
}

Ok, to get all of this working, please call the browse function, you can add a button, I will just call it from the timeline, so when you start the movie, the player will ask you for a file.

//ask for a file
myFileReference.browse();

Here is an example using filters

//load with fillters
// you can create more than 1 filter and use
// myFileReference.browse([filter1,filter2,...]);
var imageFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");
myFileReference.browse([imageFilter]);

This class is a lot more powerful than this but I hope this post will help you.

[UPDATE 24 May 2010]
Here is a live demo

For more information on FileReference class visit this link from Adobe AS3 Reference

[UPDATE 24 May 2010]
Download FileReference example

Overcome, Improvise, Adapt.
See you


Share