.

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.

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 Cancelledn";
}
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";
}

How to Write the PHP

The PHP for handling the file upload is a very small and simple script. (Note that no security is added to the script; I'm leaving that part to you.) The method that we use to move the file to a specific location on the server is move_uploaded_file. This method takes two parameters: a string filename representing the selected file, and a string destination representing the server location where we want the file to be uploaded.
move_uploaded_file($_FILES['Filedata']['tmp_name'], "./files/".$_FILES['Filedata']['name']);
The second line of code handles setting the correct permissions for UNIX and Linux servers. In this example, we set full permission for the uploaded file.
chmod("./files/".$_FILES['Filedata']['name'], 0777);

Conclusion

File uploading has become a standard function in programming languages and had always been one of the functions that was lacking in Flash. Flash has come a very long way over the past few releases, positioning itself as a competitive platform with a fairly robust set of classes that keeps building with each new release. The latest release of Flash 8 gives us an idea of what's to come with future releases and proves that ActionScript has become a viable language that will keep improving.



No comments found ! Click here to be the first adding comments for this article!