[flexcoders] how to update a progress bar when uploading an image

[stinasius]

hi, am trying to upload and image and i would like to show progress while 
uploading process goes on by updating the progress bar but the progress bar 
seems not to get updated. here is my code

"formitem component"
<?xml version="1.0" encoding="utf-8"?>
<mx:FormItem xmlns:mx="http://www.adobe.com/2006/mxml"; 
creationComplete="init()">
        
        <mx:Script>
                <![CDATA[
                        import mx.managers.PopUpManager;
                        import components.progress_popup;
                        
                        private var fileRef:FileReference;
                        private var progress_win:progress_popup;
                        
                        private function init():void{
                        fileRef = new FileReference();
                        fileRef.addEventListener(Event.SELECT, fileRef_select);
                        fileRef.addEventListener(ProgressEvent.PROGRESS, 
progressHandler);
                        fileRef.addEventListener(Event.COMPLETE, 
fileRef_complete);
                }
                
                private function browseAndUpload():void{
                        fileRef.browse();
                        message.text = "";
                }

                private function fileRef_select(event:Event):void{
                        var request:URLRequest = new 
URLRequest("cfcs/upload.cfm")
                        try 
                        {
                                fileRef.upload(request);
                        } 
                        catch (err:Error)
                        {
                                message.text = "ERROR: zero-byte file";
                        }       
                        memPhoto.text = event.currentTarget.name;
                        createdprogressPopup();
                        progress_win.uploadProgress.setProgress(0, 100);
                        progress_win.uploadProgress.label = "Loading 0%";
                        }
                        
                        private function fileRef_complete(event:Event):void{
                        message.text += " (complete)";
                        removeMe();
                }
                
                private function createdprogressPopup():void{
                        
progress_win=progress_popup(PopUpManager.createPopUp(this,progress_popup,true));
                }
                
                private function removeMe():void {
                        PopUpManager.removePopUp(progress_win);
                }
                
                private function progressHandler(event:ProgressEvent):void{
                        //var file:FileReference = FileReference(event.target);
                        
progress_win.uploadProgress.setProgress(event.bytesLoaded, event.bytesTotal);   
                
                }
                
                ]]>
        </mx:Script>
        
        <mx:HBox width="240">
                <mx:TextInput width="155" id="memPhoto" enabled="false"/>
                <mx:Button label="Browse" click="browseAndUpload();"/>          
                                
        </mx:HBox>
        <mx:Label id="message"/>
</mx:FormItem>

"popup with progress bar to show progress"

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" 
creationCompleteEffect="{customMove}" removedEffect="{customHide}" 
title="Uploading Image">
        <mx:Script>
                <![CDATA[
                        import mx.managers.PopUpManager;
                        import mx.effects.easing.*;
                ]]>
        </mx:Script>

        
        <mx:Parallel id="customMove" target="{this}">        
        <mx:Move yFrom="0" xFrom="{(stage.width  - this.width) / 2}" 
xTo="{(stage.width  - this.width) / 2}" yTo="{(stage.height - this.height) / 
2}" easingFunction="Elastic.easeOut" duration="500" />
        <mx:Fade duration="500" />
    </mx:Parallel>
    
    <mx:Parallel id="customHide" target="{this}">        
        <mx:Move yFrom="{(stage.height - this.height) / 2}" 
xFrom="{(stage.width  - this.width) / 2}" xTo="{(stage.width  - this.width) / 
2}" yTo="{stage.height}" duration="500" />
        <mx:Fade alphaFrom="1" alphaTo="0" duration="500" />
    </mx:Parallel>

        <mx:ProgressBar id="uploadProgress" mode="manual" 
labelPlacement="center" width="120"/>
</mx:TitleWindow>

is there something am doing wrong?