Monitoring file upload progress in Actionscript 3

Question

I'm trying to track the progress of a file upload in AS3, and I'm getting strange behavior. When I select a file and upload it, the progress is instantaneously 100% even if the file is 10 or more megabytes, but it's not finished. The onComplete event is fired about 30 second to a few minutes later (depending on file size) when the file has really finished uploading. I've tested this locally and on the server, the behaviour is the same. Has anyone else experienced this? Very frustrating ...

Otherwise, the file is uploading fine. The code is simple:

myFileReference.addEventListener(ProgressEvent.PROGRESS, onUploadProgress);

function onUploadProgress(e:ProgressEvent) {
    var pctDone:Number = (e.bytesLoaded / e.bytesTotal) * 100;
    trace(pctDone);
}

Answer 1

Your code looks ok! I do not see any reason why it should not work as expected.

Do you add the event listener before or after calling the browse() method on the filereference ? Try switching the order and see if you get any luck.

Answer 2

The only thing I can think of is that maybe e.bytesTotal is not being initialized properly. Maybe try tracing it to verify this?

If that is the case, I would suspect the problem is with whatever server-side technology you are streaming the file data to (ie, whatever the URL you're passing to myFileReference.upload leads to). Also note that FileReference.upload has two optional parameters that may help you out, though given what I know about them I wouldn't think they have much to do with this issue.

Good luck!

http://livedocs.adobe.com/flex/3/langref/flash/net/FileReference.html#upload%28%29

Answer 3

I don't believe you need to multiply by 100. If I remember correctly, the progress bar in AS3 goes from 0 to 1.0

Answer 4

Well, I found this question when stumbling to a similar problem. I have a multiple file upload applet. I am monitoring two pieces of progress: each file individually and the total number of files. The latter works as expected because it is done manually but the firs one fails exactly the same way. Adding a trace reveals a nasty behaviour:

protected function fileUploadProgress(event:ProgressEvent):void{
    var bytesTotal:uint = event.bytesTotal;
    var bytesLoaded:uint = event.bytesLoaded;
    progressBar_current.setProgress(bytesLoaded, bytesTotal);
    trace(bytesLoaded+ " / "+bytesTotal); 
}

327680 / 462357 
462357 / 462357 
398304 / 398304 
441478 / 441478 
457319 / 457319 
478448 / 478448

My upload is around 500 kbps so each file takes several seconds but as you can see in all cases except the first file only one event per file is fired and immediately after the start and at 100%.

UPDATE UPDATE: Found out! After deinstalling AVG Antivirus the progress event worked EXACTLY the way it should. Some people with NOD have experienced the same problems as well. So this seems to be the problem of AV/Firewall applications. AVG Free has no firewall included but it still seems to break the upload.