Uploading Files using FileReference - Page 2

The functions from the file on the previous page are defined alphabetically, but the ActionScript will be explained in the order that the functions are called. Error handling will be dealt with closer to the end. Keep in mind that a few identifiers are defined in the .fla itself and not in the ActionScript, namely the two buttons (uploadButton_mc and chooseButton_mc) and the TextField (display_txt).

On to the ActionScript:

import flash.net.FileReference;

var progressBar:MovieClip;

var reference:FileReference = new FileReference();

var referenceListener:Object = {};

var scriptLocation:String = 'uploader.php';

var progressBarHeight:Number = 10;

var progressBarY:Number = 50;

var progressBarColor:Number = 0x66ccff;

uploadButton_mc._visible = false;

reference.addListener(referenceListener);

referenceListener.onSelect = activateUploadButton;

referenceListener.onProgress = updateProgress;

referenceListener.onComplete = restart;

referenceListener.onHTTPError = handleError;

referenceListener.onIOError = handleError;

referenceListener.onSecurityError = handleError;

chooseButton_mc.onRelease = choose;

uploadButton_mc.onRelease = uploadCurrent;

In this section, we are setting up for what is to come. The progress bar doesn't exist yet, but multiple functions will need to access it once it is instantiated, so the identifier is defined in a scope accessible to the functions we will create. Unlike MovieClips, FileReference instances don't handle the process of listening and handling events alone, so a generic object is created to listen for FileReference-related events. The same FileReference object will be used by multiple uploads, should the user choose to upload more than one file. The browse method writes over the properties of its FileReference object each time a file is selected, so we don't have to worry about an old upload contaminating the next.

The next four lines define implementation-specific details that would probably be different for each uploader application. In the next line, the 'Upload' button is hidden from the user until he chooses a file to upload. After that, we tell the object we created earlier to listen for events generated by our FileReference instance. The next lines set a number of functions to be triggered when a FileReference event is generated. The second to last line sets a function to be called when the 'Choose' button is pressed.

You might have noticed that the rest of the ActionScript consists of a bunch of function definitions. That means that there must be something in the above lines of code that will start a chain of function calls to upload a file! It turns out the the onRelease handler we just defined will have to start the chain, since none of the FileReference events will be generated until the browse method is called, and that method isn't called until the 'Choose' button is pressed. Let's examine the handler, choose, now.

function choose():Void {

reference.browse([{description:'All Files (*.*)', extension:'*.*'}]);

}

At first glance, this function looks fairly simple. It turns out that the browse method accepts somewhat complex input, since the input determines which file types a user can upload. The only (explicit) parameter that this method accepts is an Array. Each element in the array represents a file type group, such as 'Images' or 'Videos'. Elements must be of the Object type (so it is convenient to use the Object literal braces '{}'), and each Object needs to have at least two properties: 'description' and 'extension'. An optional 'macType' property can be specified so that OSX users can have their files filtered by a special file property. In this tutorial, any file type can be uploaded, signified by the wildcard (*) characters on either side of the period in the 'extension' field's contents.

It is important that you allow only the file types that you need your user to be able to upload in order for your application to function properly. Allowing extraneous file types wastes bandwidth and potentially malicious attacks. File size is another issue that can be addressed while still in Flash. If you wish to limit user upload file size, check the size of the selected file using the size property after the user has selected a file, when the onSelect handler is called. Recall that our handler is the activateUploadButton function.

1 | 2 | 3 | 4