How to reset Flex Progress bar in the datagrid?

Question

I've developed a simple file upload program with flex. After adding files, and clicking on upload, the progress bar works fine. However, when I click on remove all and start adding files again, the progress bar does not seem to reset. I have tried searching this forum for answers but failed to find any. Could anyone help me with this please? My code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init(event);" layout="absolute" width="300" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" height="308">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import flash.net.FileReference;

            private var filesArr:ArrayCollection = new ArrayCollection();
            private var uploadList:ArrayCollection = new ArrayCollection();
            private var fileRef:FileReference;

            private var request:URLRequest = new URLRequest("uploadPic.aspx");

            public function init(e:Event):void 
            {   
                btnAdd.addEventListener(MouseEvent.CLICK, addFilesHandler);
                btnUpload.addEventListener(MouseEvent.CLICK, uploadFilesHandler);
                btnRemoveAll.addEventListener(MouseEvent.CLICK, removeAllHandler);
            }

            protected function addFilesHandler(event:Event):void
            {               
                fileRef = new FileReference();
                fileRef.addEventListener(Event.SELECT, selectHandler);
                fileRef.browse();               
            }

            protected function selectHandler(event:Event):void
            {
                fileRef.removeEventListener(Event.SELECT, selectHandler);
                var token:Object = {name:fileRef.name, size:Math.round(fileRef.size / 1024) + " kb", progress:fileRef};
                filesArr.addItem(token);
                uploadList.addItem(fileRef);
            }

            protected function uploadFilesHandler(event:Event):void
            {
                request.method = URLRequestMethod.POST;
                var tmpFileRef:FileReference;

                for(var i:int = 0; i < uploadList.length; i++)
                {
                    tmpFileRef = uploadList[i];
                    tmpFileRef.upload(request, "fileUpload");
                } 
            }

            protected function removeAllHandler(event:Event):void
            {
                uploadList.removeAll();
                filesArr.removeAll();
            }            
        ]]>
    </mx:Script>

    <mx:Button label="Add Files" id="btnAdd" x="0" y="0"/>
    <mx:Button label="Upload" id="btnUpload" x="112.5" y="0" width="75"/>   
    <mx:Button label="Remove All" id="btnRemoveAll" x="209" y="0"/>

    <mx:DataGrid id="dgMain"
        dataProvider="{filesArr}"
        horizontalScrollPolicy="off"
        verticalScrollPolicy="on" 
        allowMultipleSelection="false" rowHeight="100" x="0" y="32" editable="false" height="275" width="300">
        <mx:columns>
            <mx:DataGridColumn dataField="name" headerText="Name" />
            <mx:DataGridColumn dataField="size" headerText="Size" width="150" >
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:VBox horizontalAlign="center">
                            <mx:Label id="lblSize" text="{data.size}" /> 
                            <mx:ProgressBar id="pbarUpload" mode="event" source="{data.progress}" 
                                label="%1 of %2 KB %3%%" conversion="1024" width="100"/>
                        </mx:VBox>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>