PHP/Actionscript 3 multiple file upload with progress indicator

Question

I am trying to upload image files to my server using AS3 and PHP, and at the moment I am succeeding in uploading multiple files and restricting it to images only, but since I am new to Flash and AS3, I am finding it difficult to figure out how to have a loader bar show when the files are being uploaded, as well as executing a function once all files have been uploaded to go to a specified frame.

Here is my code thus far,

AS3:

import flash.net.FileReferenceList;
import flash.events.Event;
import flash.net.URLRequest;
import flash.net.FileReference;

var fileRef:FileReferenceList = new FileReferenceList();
fileRef = new FileReferenceList();
fileRef.browse(new Array( new FileFilter( "Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png" )));
fileRef.addEventListener(Event.SELECT, fileSelectHandler);

var uploadURL:URLRequest = new URLRequest();
var uploadPhotoScript:String = "http://127.0.0.1/upload.php";
uploadURL.url = uploadPhotoScript;

function fileSelectHandler(event:Event):void {
    for each(var fileToUpload:FileReference in fileRef.fileList){
            uploadSingleFile(fileToUpload);
        }
}

function uploadSingleFile(file:FileReference):void {
    file.upload(uploadURL);
    file.addEventListener(Event.COMPLETE, completeHandler);
}

function completeHandler(event:Event):void {
    trace("upload complete");
}

PHP:

if(!empty($_FILES)){
    $tmpfile = $_FILES['Filedata']['tmp_name'];
    $targetfile = dirname(__FILE__) . '/' . $_FILES['Filedata']['name'];
    move_uploaded_file($tmpfile, $targetfile);
}

my questions are,

1: how can I display a percentage or a uploading bar indicating the progress of the files being uploaded?

2: How can I launch a callback function after ALL files have been uploaded successfully?

3: How can I make the file browser appear on click, and not upon loading the flash file?

If you guys could post a link or two to good tutorials/resources or some advice, maybe even a code snippet or two that would be a great help as I am very new to Actionscript 3.

Thanx in advance!

Unknown Unknown · Accepted Answer · 2011-05-29T20:51:01

To answer your questions in sequence:

1: You can use the ProgressEvent to display file upload progress. Since the File will be the dispatcher of the event, you can access the FileReference that has dispatched the progress as e.currentTarget inside the event, and from here you can access the unique properties of that file reference so you can accurately update the visual upload progress for that specific file. For example:

function uploadSingleFile(file:FileReference):void {
    file.addEventListener(ProgressEvent.PROGRESS, onUploadProgress);
    file.upload(uploadURL);
    file.addEventListener(Event.COMPLETE, completeHandler);
}

function onUploadProgress(e:ProgressEvent):void
{
    var f:FileReference = e.currentTarget as FileReference;
    var fileName:String = f.name; //Now I know which file it is, I can update accordingly
    var progress:Number = (e.bytesLoaded / e.bytesTotal) * 100; //shows percent, you might want to round this off using Math.round(number);
}

2: In order to launch a callback after ALL files are loaded, you'd do this by storing the number of files initially selected, then adding a callback specifically to each item and as they complete, decrement the total count until it is 0, at which time you'll know all files have been uploaded:

var totalFiles:int = 0;

function fileSelectHandler(event:Event):void {
    for each(var fileToUpload:FileReference in fileRef.fileList){
            ++totalFiles;
            uploadSingleFile(fileToUpload);            
        }
}

function uploadSingleFile(file:FileReference):void {
    file.addEventListener(ProgressEvent.PROGRESS, onUploadProgress);
    file.addEventListener(Event.COMPLETE, onFileUploadComplete);
    file.upload(uploadURL);
    file.addEventListener(Event.COMPLETE, completeHandler);
}

function onFileUploadComplete(e:Event):void
{
    --totalFiles;
    if(totalFiles == 0){
        //All files have been uploaded
    }
}

3: To make the browser appear onClick, simply add a MouseEvent.MOUSE_DOWN listener to an object or button of some kind, or even the stage, whatever. Like so:

var uploadButton:Button = new Button(); // Note this will require the Button component to  be included in your library in flash CS

uploadButton.label = "Upload Files";
uploadButton.width = 150; //Or whatever;
uploadButton.x = (stage.stageWidth * .5) - (uploadButton.width * .5);
uploadButton.y = (stage.stageHeight * .5) - (uploadButton.height * .5);
stage.addChild(uploadButton);

uploadButton.addEventListener(MouseEvent.MOUSE_DOWN, onUploadClicked);

function onUploadClicked(e:MouseEvent):void
{
    var fileRef:FileReferenceList = new FileReferenceList();
    fileRef = new FileReferenceList();
    fileRef.browse(new Array( new FileFilter( "Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg;*.jpeg;*.gif;*.png" )));
    fileRef.addEventListener(Event.SELECT, fileSelectHandler);
}

And finally about the tutorials etc, I'd recommend http://gotoandlearn.com for learning flash. I would also recommend just checking out the AS3 docs, as all of this nfo can be gleaned from just looking up the class in question, FileReferenceList. Please note I've done this code off of the top of my head in here so I had no IDE checking or anything. However it should work just fine. Hope this helps. :)

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/FileReferenceList.html
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/FileReference.html#upload()

http://adobe.com/go/as3lr

PHP/Actionscript 3 multiple file upload with progress indicator

1 Answers