ProgressBar not getting updated properly

Question

I am trying to design a multiple file uploader in the
following code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="vertical" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.utils.ArrayUtil;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.ListEvent;
private var _fileReferenceList:FileReferenceList;
[Bindable]
private var _arrUploadFiles:ArrayCollection;
private var index:Number;
private var prev_index:Number;
private var flag:Number=0;
private var buttonType:Number=0;
private function init():void
_fileReferenceList = new FileReferenceList();
_arrUploadFiles = new ArrayCollection();
_fileReferenceList.addEventListener(Event.SELECT,
selectHandler);
dataGrid.dataProvider=_arrUploadFiles;
trace("in init"+_arrUploadFiles);
private function selectHandler(event:Event):void
{ var arrFoundList:Array = new Array();
for (var i:Number = 0; i < _arrUploadFiles.length; i++)
{ for (var j:Number = 0; j <
_fileReferenceList.fileList.length; j++)
{ if (_arrUploadFiles
.name == _fileReferenceList.fileList[j].name)
arrFoundList.push(_fileReferenceList.fileList[j].name);
_fileReferenceList.fileList.splice(j, 1);
j--;
var fileList:Array = _fileReferenceList.fileList;
var file:FileReference;
if (fileList.length >= 1)
for (var k:Number = 0; k < fileList.length; k++)
{ file = FileReference(fileList[k]);
_arrUploadFiles.addItem({name:file.name, size:file.size,
object:file});
trace(_arrUploadFiles);
if (arrFoundList.length >= 1)
Alert.show("The file(s): \n\n• " +
arrFoundList.join("\n• ") + "\n\n...are already on the upload
list. Please change the filename(s) or pick a different file.",
"File(s) already on list");
private function browse(event:MouseEvent):void
//_arrUploadFiles.removeAll();
//_arrUploadFiles.refresh();
var imagesFilter:FileFilter = new FileFilter("Images",
"*.jpg;*.gif;*.png");
_fileReferenceList.browse([imagesFilter]);
private function upload(event:MouseEvent):void
//var _fileList:Array = _fileReferenceList.fileList;
for (var i:Number=0; i<_arrUploadFiles.length; i++)
var urlRequest:URLRequest = new URLRequest("
http://localhost/FileUpload-debug/uploadFile.php");
var file:FileReference = _arrUploadFiles.object;
file.upload(urlRequest,'file');
file.addEventListener(Event.COMPLETE,
uploadCompleteHandler);
private function clearAll(event:Event):void
{ trace("in clear 1"+_arrUploadFiles);
_arrUploadFiles.removeAll();
_arrUploadFiles.refresh();
trace("in clear"+_arrUploadFiles);
init();
trace("again in clear"+_arrUploadFiles);
private function uploadCompleteHandler(event:Event):void
public function
buttonClickHandler(event:MouseEvent,type:Number):void
{ buttonType=type;
flag=1;
public function upClickHandler():void
//Alert.show("button on index"+index+"was clicked");
var urlRequest:URLRequest = new URLRequest("
http://localhost/FileUpload-debug/uploadFile.php");
var file:FileReference = _arrUploadFiles[index].object;
file.upload(urlRequest,'file');
file.addEventListener(Event.COMPLETE,
uploadCompleteHandler);
flag=0;
public function removeClickHandler():void
_arrUploadFiles.removeItemAt(index);
public function handleItemClick(event:ListEvent):void
if(flag && buttonType==0)
index=event.rowIndex;
upClickHandler();
if(flag && buttonType==1)
index=event.rowIndex;
removeClickHandler();
]]>
</mx:Script>
<mx:VBox>
<mx:DataGrid itemClick="handleItemClick(event);"
id="dataGrid" width="500" >
<mx:columns>
<mx:DataGridColumn headerText="File Name"
dataField="name" width="100"/>
<mx:DataGridColumn headerText="Size" dataField="size"
width="30"/>
<mx:DataGridColumn id="Progress" headerText="Progress"
dataField="object" width="200">
<mx:itemRenderer>
<mx:Component>
<mx:HBox verticalAlign="middle">
<mx:ProgressBar id="progress" label="" height="6"
source="{data.object}"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Controls"
dataField="object" width="150">
<mx:itemRenderer>
<mx:Component>
<mx:HBox verticalAlign="middle">
<mx:Button
click="outerDocument.buttonClickHandler(event,0)" toolTip="Upload
file(s)" icon="@Embed('assets/application_get.png')"
width="26"/>
<mx:Button
click="outerDocument.buttonClickHandler(event,1)" toolTip="Remove
file(s)" icon="@Embed('assets/delete.png')" width="26"/>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
<mx:HBox width="100%">
<mx:Button label="Browse" click="browse(event)"/>
<mx:Button label="Clear All" click="clearAll(event)"/>
<mx:Spacer width="100%"/>
<mx:Button label="Upload" click="upload(event)"/>
</mx:HBox>
</mx:VBox>
</mx:Application>
Now the code works perfetly fine and file upload progress is
shown properly for the first time, but when clear all button is
used and i choose another set of files for uploading, the progress
bars rendered in the datagrid row of that file show complete
progress already at all those row positions where in previous
operation i had uploaded my files
This is like if i enter 3 files in the list and upload only
first 2 and then press clear list, in next operation when I choose
another 3-4 file, first two progress bars and then everyfourth and
fifth progress bar shows full progress already before uploading
those files.
Please tell me if there's some bug or its an error in coding

Answer 1

This sounds like the recycling issue. As though this binding:
source="{data.object}" is not firing when the underlying item
changes.
I don't use drop-in itemRenderers because they are too hard
to debug. Consider implementing this a a full itemRenderer instead.
That way you can trace or step through the set data() override to
see what is happening.
If you do decide to build a full renderer, do not start from
scratch, but find an example to modify.Google: Alex Harui
itemRenderer recycle.
Tracy