In Flash, you've always had the ability to load content that was stored on a server. For a class of applications, having the ability to load content that lives on disk is quite useful. The pleas were heard and acknowledged, and Adobe recently added support to allow users to load local content into your Flash application.

Since seeing is believing, in the following example, click on the Load button and browse to an image file that you want this application to display:

[ click on the Load button and select an image file ]

When you click on the Load button, notice that your operating system's Open File Dialog will appear allowing you to select a file:

[ files I am currently browsing through ]

Once you have selected an image file and clicked on the Open button, your selected image will be displayed in your Flash application:

[ yes, I realize this image wasn't shown in the thumbnails in the earlier screenshot ]

In this tutorial, you will learn how to use the FileReference class to display a dialog, select a file, and process the file for use. While my code and example will seem to favor only image file types, the approach used will be generic enough for you to very easily extend to other more file types.

This tutorial is more of a deconstruction rather than introducing building blocks in a step-by-step way for you to arrange, so feel free to download the source file for the example shown above and whose code will be described in this and the next section.

General Approach

The approach to take when wanting to load a local file is as follows:

1. Display the native Windows/OS X dialog for selecting a file.
2. If a file is selected, attempt to load the file.
3. Once the file has been loaded, do other things to the file such as displaying its contents

The code you are about to see is simply an ActionScript-ized form of the three steps you see above. Without further ado, the code is:

import flash.net.FileReference;
import flash.events.Event;
import flash.net.FileFilter;
var file:FileReference;
var fileLoader:Loader;
function start()
{
  loadImageBtn.addEventListener(MouseEvent.CLICK, showDialog);
}
start();
function showDialog(event:MouseEvent):void
{
  file = new FileReference();
  var imageFileTypes:FileFilter = new FileFilter("Images (*.jpg, *.png)", "*.jpg;*.png");
  file.browse([imageFileTypes]);
  file.addEventListener(Event.SELECT, selectFile);
}
function selectFile(e:Event):void
{
  file.addEventListener(Event.COMPLETE, loadFile);
  file.load();
}
function loadFile(e:Event):void
{
  fileLoader = new Loader();
  fileLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, displayImage);
  fileLoader.loadBytes(file.data);
}
function displayImage(e:Event):void
{
  addChild(fileLoader);
}

The code seems like a lot, but as you will see shortly, it is actually quite straightforward. Let's look at each segment of code in greater detail.

Displaying the Native Open File Dialog

First, in our quest to load local files is to display the dialog that will allow your users to select a file itself. The code for doing that is contained in the following lines of code:

var file:FileReference;
var fileLoader:Loader;
function start()
{
  loadImageBtn.addEventListener(MouseEvent.CLICK, showDialog);
}
start();
function showDialog(event:MouseEvent):void
{
  file = new FileReference();
  var imageFileTypes:FileFilter = new FileFilter("Images (*.jpg, *.png)", "*.jpg;*.png");
  file.browse([imageFileTypes]);
  file.addEventListener(Event.SELECT, selectFile);
}

Let's look at the two variables that are declared at the top first:

var file:FileReference;
var fileLoader:Loader;

These two variables, file and fileLoader, are of tpe FileReference and Loader respectively. How these variables are used will make more sense when they are initialized in the code, so we'll revisit each individually when the time is right.

---

function showDialog(event:MouseEvent):void
{
  file = new FileReference();
  var imageFileTypes:FileFilter = new FileFilter("Images (*.jpg, *.png)", "*.jpg;*.png");
  file.browse([imageFileTypes]);
  file.addEventListener(Event.SELECT, selectFile);
}

The showDialog function is invoked in this example when the loadImageBtn is clicked. As its name implies, this function is in charge of actually showing the dialog.

Notice that the first thing we do is initialize the file variable that was declared earlier by calling the FileReference constructor:

file = new FileReference();

As you will see, the FileReference class contains everything (classes, properties, events) you would need to handle opening a file.

---

The next two lines help our showDialog function live up its name by actually displaying the the dialog:

var imageFileTypes:FileFilter = new FileFilter("Images (*.jpg, *.png)", "*.jpg;*.png");
file.browse([imageFileTypes]);

The FileFilter object imageFileTypes allows you to constrain which file types you will allow your users to select via the dialog:

var imageFileTypes:FileFilter = new FileFilter("Images (*.jpg, *.png)", "*.jpg;*.png");

I specify the filtering constraint in the constructor of the FileFilter class itself, and the format for filtering basically involves a description of the file format followed by a semi-colon delimited list of actual file formats. You must follow this general format in order to have Flash properly communicate what you want to the dialog:

[ your FileFilter information is passed along to the dialog ]

To actually display the dialog, you call our file object's browse function:

file.browse([imageFileTypes]);

The browse function takes our earlier FileFilter object as its argument. The important thing to note is that it takes the FileFilter arguments in the form of an array. Because I only have one FileFilter object, only one FileFilter object is specified in the array:

file.browse([imageFileTypes]);

If you wanted to constrain by several file types, you would append the array with more FileFilter objects as needed.

---

The last thing we do is setup an event listener to let your application know that a file has been selected via this dialog:

file.addEventListener(Event.SELECT, selectFile);

I add this event listener to our file object itself, and that is because it is also the file object that calls the browse function that launches the dialog. The event I am listening for is the SELECT event. When a SELECT event is fired, the selectFile event handler function will get called. Let's go ahead and look at that in the next section!

In the previous section, we got about half way through the tutorial when we looked at the code that is responsible for displaying the file selection dialog. In this page, we'll continue where we left off and start examining what happens when a file has been selected.

---

When a File is Selected, Attempt to Load It

We ended by looking at the event listener that listens for the SELECT event and calls the selectFile event handler when that event is overheard:

function selectFile(e:Event):void
{
  file.addEventListener(Event.COMPLETE, loadFile);
  file.load();
}

The selectFile event handler does only two things. It registers another event listener on our file object, and this time, the event we are listening for is the COMPLETE event. This event fires when what we are trying to load, the file you selected earlier, has completely been loaded into memory. This event listener will fire the loadFile event handler.

While we have an event listener listening for an event that will fire when we load our selected file, we haven't actually told Flash to load anything yet. That is taken care off in the second line with the load function, also accessed through our file object:

file.load();

This line initiates loading the file, and when the file has loaded, thanks to the event listener you declared one line above, the loadFile event handler will get called.

Let's look at that next:

function loadFile(e:Event):void
{
  fileLoader = new Loader();
  fileLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, displayImage);
  fileLoader.loadBytes(file.data);
}

In the first line, we initialize the fileLoad variable that we talked about a while ago! The fileLoader object now has access to the superpowers the Loader class contains. The Loader class is responsible for loading SWF files or images. For other types of files, you have the URLLoader class that you can use instead.

What we want to do is use our Loader object (fileLoader) to load the image file you selected earlier and display it. For this, you will need another event listener:

fileLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, displayImage);

This time, our event listener is attached to our fileLoader object's contentLoaderInfo property.

This contentLoaderInfo property wraps the content you are loading into a LoaderInfo object, and a LoaderInfo object is the intermediate container your content needs to be in as it makes its way from a Loader object (fileLoader) into something that has been fully loaded. The diagram on Adobe's AS3 Documentation page is helpful in making sense of this.

The event listener attached to the contentLoaderInfo property will call the displayImage event handler when the COMPLETE event has been fired. This event is fired when data loaded into your fileLoader object has been fully loaded, and when that happens, you tell Flash to load the data in the following line:

fileLoader.loadBytes(file.data);

The loadBytes function takes the data returned by your FileReference object file.

---

Displaying the Image

The last thing that remains is to look at the displayImage event handler that gets called when our image data is successfully loaded by our Loader object, fileLoader:

function displayImage(e:Event):void
{
  addChild(fileLoader);
}

This is probably the easiest line of code to explain in this tutorial. Because we know that the image data has been fully loaded, we can display it by just passing the fileLoader object as the argument to addChild. The addChild function takes an object and puts it on the visual tree for display, and fortunately, our fileLoader is one object that actually has a visual component associated with it - your image.

---

Conclusion

With your loaded image displayed in your stage, we are now done with this tutorial. Loading files from disk into a Flash application is pretty straightforward. It can be distilled into three steps as shown earlier. If you want to make this a bit more generic so that you can load other file types besides images, you will need to only make some minor tweaks...hopefully.

If you are curious to see the full, working version of this, download the source files from below:

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence slop, ads, and algorithm-driven doodads. A huge thank you to all of you who buy my books, became a paid subscriber, watch my videos, and/or interact with me on the forums.

Your support keeps this site going! 😇