Uploading Files using FileReference - Page 3

ActionScript Explanation Continued:
The body of the button activation function mentioned on the previous page is as follows:

function activateUploadButton():Void {

display_txt.text = reference.name;

uploadButton_mc._visible = true;

}

Once the user has selected a file, we place the name of the file in our TextField. This way, the user is certain that she has selected the correct file. We then activate the 'Upload' button, since unless the user has made a selection mistake, he is now ready to upload the file. When the button is released, we begin to upload the file using uploadCurrent.

function uploadCurrent():Void {

chooseButton_mc._visible = false;

progressBar = makeProgressBar(0, progressBarY);

reference.upload(scriptLocation);

}

Now that the user has chosen a file to upload, she no longer needs the 'Choose' button, so we hide it for now. Progress bars are a fairly standard way to inform users of how far along an operation is, and we create the MovieClip to contain ours now. The makeProgressBar function simply draws a box and sets its width to 0. The ActionScript explanation is not included here, but is covered in the Drawing API tutorial by pom. The bar is deleted and created again each upload to avoid having a MovieClip in memory when it isn't needed. The final line tells the FileReference to attempt to start the upload. For now, we are at the mercy of our upload script.

[ a simple example uploader script in PHP ]

Periodically, Flash will be notified of updates in the progress of the upload. When that happens, Flash notifies the FileReference, which will call the function assigned to be onProgress handler. In our case, that handler is updateProgress:

function updateProgress(fileReference:FileReference, bytesLoaded:Number, bytesTotal:Number):Void {

display_txt.text = fileReference.name+' - '+Math.ceil((bytesLoaded/bytesTotal)*100)+'%';

progressBar._width = Math.ceil(Stage.width*(bytesLoaded/bytesTotal));

}

The progress event comes with two familiar pieces of data about the progress that you are probably familiar with already if you have dealt with loading in Flash before, bytesLoaded and bytesTotal. The width of the progress bar is set to some fraction (representing load progress) of the width of the Stage, and the TextField displays a rounded percentage.

function restart():Void {

removeMovieClip(progressBar);

display_txt.text = '';

uploadButton_mc._visible = false;

chooseButton_mc._visible = true;

}

When the upload (finally) finishes, Flash dispatches an event and, in our case, the restart function is called. This functions prepares the application for another file upload. To accomplish this, we remove the progress bar, clear the TextField, and set the buttons back to their default states. The user now has the option of uploading another file, and the process should repeat itself smoothly.

1 | 2 | 3 | 4