Progress Event in Flex 4.6 mobile app

Question

I'm just developing a Flex mobile application and need to show the upload progress of an image.

The code is:

protected function upload( ba:ByteArray, fileName:String = null ):void {
            if( fileName == null ) {                
                var now:Date = new Date();
                fileName = "IMG" + now.fullYear + now.month +now.day +
                    now.hours + now.minutes + now.seconds + ".jpg";
            }

            var loader:URLLoader    = new URLLoader();
            loader.dataFormat       = URLLoaderDataFormat.BINARY;

            var wrapper:URLRequestWrapper = new URLRequestWrapper(ba, fileName, null, params);
            wrapper.url = "http://www.the_url_to_upload.com/php_content/upload_image.php";

            loader.addEventListener( Event.COMPLETE,            completeImageHandler );
            loader.addEventListener( ProgressEvent.PROGRESS,    imageProgress);
            loader.addEventListener(IOErrorEvent.IO_ERROR,      errorImageUploading );
            loader.load(wrapper.request);
        }
        private function imageProgress(evt:ProgressEvent):void {
            var pcent:Number=Math.floor(evt.bytesLoaded/evt.bytesTotal*100);
            label_upload.text = pcent+"%";
        }

I have a Label called "label_upload" that should show the percentage of the progress when the file upload.

The fact is that all works fine but the progress event that do not change anything. Always show 0%.

I can not guess my fault.

Thanks.

Cant see any problems with code. Is imageProgress method getting called? add "trace(evt.bytesLoaded);" to it to confirm — user1901867
I think it's not called due to label_upload.text would be updated in text for sure. All the same i will trace it. — Apalabrados
but completeImageHandler does fire? how big are loaded image files - perhaps they're small enough to completely load in one go (hence no progress) — user1901867
Yes, the image upload to server and all the process works fine, it's just displaying the progress percentage via progressEvent, which do not fire. — Apalabrados

Unknown Unknown · Accepted Answer · 2013-02-13T20:36:03

Flash doesnt give progress events for uploading files - only downloading.

If you need progress events, you would have to split file into sections and upload each section at a time; manually updating progress message in response to complete event for each section. eg:

//assume file to upload stored as ByteArray called "ba"

//setup counters
currentChunk = 0;
totalChunks = Math.ceil(ba.length/CHUNK_SIZE);
//listener
loader.addEventListener(Event.COMPLETE, completeHandler);

This code will send a single chunk:

function sendChunk():void
{
    const CHUNK_SIZE:int = 4096;
    var request:URLRequest = new URLRequest(destinationUrl);
    request.method = URLRequestMethod.POST;
    request.contentType = "application/octet-stream";
    request.data = new ByteArray();
    var chunkSize:uint = Math.min(CHUNK_SIZE, ba.bytesAvailable);
    ba.readBytes(request.data as ByteArray, 0, chunkSize);
    loader.load(request);
}

CHUNK_SIZE is the max bytes to send in one go. request.contentType=... sets data format as binary.

Then:

function completeHandler(event:Event):void
{
    //expect a result from server to acknowledge receipt of data
    if (loader.data=="OK")
    {
        if (++currentChunk<totalChunks)
        {
    trace("progress: "+currentChunk+" of "+totalChunks+" sent");
            //send next chunk
            sendChunk();
        }
        else
        {
             trace("finished!");
        }
    }
    else
    {
        trace("OK not receieved from server");
    }
}

This will send the entire file in sections. The php script should respond with "OK" (or choose some other appropriate response) - this will show up in loader.data - so flash knows there has not been an error.

I cant help you with the php side of things as i have always left that to others but its pretty straight-forward as i understand it so a question on stack should get you an answer.

Progress Event in Flex 4.6 mobile app

1 Answers