How to Upload a File by Using the Flash FileReference Object

Flash has long lacked the ability to upload files, a standard function in programming languages. Kris Hadlock cheers the addition of the FileReference object in Flash 8; by combining a bit of ActionScript and PHP, it's now quite simple to create a Flash file-uploading GUI.

Like this article? We recommend

Like this article? We recommend

The FileReference class is a long-awaited addition to Flash. This
class allows you to browse local drives on a user’s computer and provide
the user with the ability to select files for upload by sending the file to a
simple server-side script.

This article assumes that you have an understanding of ActionScript and basic
knowledge of PHP. The
sample download
contains a fully functional, Flash file-uploading GUI with a PHP back-end to
transport the files. I’ll show you how to write the ActionScript to handle
the front-end FileReference code. The FileReference code will
handle all possible situations, from canceling the upload to sending the file to
a server-side script. Once we cover the ActionScript, I’ll show you a
simple server-script for handling the upload and actually moving a file to the
server.

How to Code the ActionScript

The FileReference class offers a robust set of methods and
properties that cover many user interactions. In this section, we’ll see
how to use this functionality to handle the front-end code. Before we can use
the FileReference class, we must first import it:

import flash.net.FileReference;

Once the class has been imported, we can create an instance of the object,
but before we do that we’ll create an array of file types that the object
will accept. The following code creates an array of file types called
fileTypes, which will contain an imageTypes object:

The imageTypes object contains a description string and an
extensions string. The description string is what displays in the file-browsing
dialog, and the extensions string is used to restrict the user’s file
selection.

Now let’s add a way to trigger uploads and create an instance of the
FileReference object. The sample uses a button to handle uploads and
requires a listener object to handle the events. When the button is clicked, the
listener fires the click event and creates a new FileReference
object. The FileReference object then registers its own listener to
listen for selected files, fires the browse method, and opens a
file-browsing dialog. The file-browsing dialog takes the fileTypes
array that we created earlier as a parameter.

Now that the user can open the file-browsing dialog, we need to be able to
handle various events that could occur. The first method that we’ll add is
onCancel. This method handles user cancellations and accepts a
FileReference parameter, which can be used for logging purposes or as a
way to clean up the leftover object, which has been canceled and is no longer
needed.

The onSelect method is where all the action happens. Like the
onCancel method, this method also accepts the FileReference
object that was created and is being listened to by the corresponding listener.
When the event is fired, this method is triggered, allowing us to take the
selected file and do whatever we want with it. In the example, I invoke the
upload method and pass the path to the server-side script that will
handle transferring the file from the user’s local machine to the remote
server. Since this method returns a Boolean stating whether or not it was
successful, we’ll add an if statement to check the results. If
the file upload returns false, we’ll write the result to the
screen to alert the user that something went wrong.

The next method that we’ll add is onOpen; this method is
triggered when the user’s file has been selected and is in the process of
being added to the server. Like the other methods, onOpen takes a
FileReference parameter.

In order to display the status of the file upload, we can use the
onProgress method to display a loading message. This method takes a
FileReference, bytesLoaded, and bytesTotal
parameters. The bytesLoaded and bytesTotal parameters are the
numbers that you’ll need to determine the progress of the upload and show
the user how long it should take.

The onComplete method is a great way to handle any events that you
would like to happen when the file has been completely uploaded. For instance,
you may want to display a completed message, redirect the user to another page,
or even load an image that was uploaded to the page that the user is
viewing.