How to Upload a File by Using the Flash FileReference Object
Like this article? We recommend
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:
var fileTypes:Array = new Array(); var imageTypes:Object = new Object(); imageTypes.description = "Images (*.jpg, *.jpeg, *.gif, *.png)"; imageTypes.extension = "*.jpg; *.jpeg; *.gif; *.png"; fileTypes.push(imageTypes);
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.
var fileListener:Object = new Object();
var btnListener:Object = new Object();
btnListener.click = function(eventObj:Object)
{
var fileRef:FileReference = new FileReference();
fileRef.addListener(fileListener);
fileRef.browse(fileTypes);
}
uploadButton.addEventListener("click", btnListener);
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.
fileListener.onCancel = function(file:FileReference):Void
{
resultsTxtField.text += "File Upload Cancelled\n";
}
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.
fileListener.onSelect = function(file:FileReference):Void
{
resultsTxtField.text += "File Selected: " + file.name;
if(!file.upload("http://www.your domain.com/path to/upload.php"))
{
resultsTxtField.text += "Upload dialog failed to open.\n";
}
}
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.
fileListener.onOpen = function(file:FileReference):Void
{
resultsTxtField.text += "File Opened: " + file.name + "\n";
}
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.
fileListener.onProgress = function(file:FileReference, bytesLoaded:Number, bytesTotal:Number):Void
{
resultsTxtField.text += "Loading Progess: bytesLoaded: " + bytesLoaded + ", bytesTotal: " + bytesTotal + "\n";
}
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.
fileListener.onComplete = function(file:FileReference):Void
{
resultsTxtField.text += "File Upload Complete: " + file.name + "\n";
}