i am trying to complete a multiple image uploader. i completed the multiple image uploader partially... My project contain a title window,a data grid and 3 buttons(select,upload,cancel).And the data grid contain 3 columns(image preview,name,size). i also put two progress bar. One is showing total images upload progress.. And other is put as item render for each image upload progress seperately(that progress bar showed at the data grid name column and the label of that progress bar is the name of each image)..the first one is working perfectly..But the second item render progress bar is not working..How can i maintain it?? can any one help me?? pls...
my demo is given below.. http://demo.enfintech.net/MultipleFileUpload/ sometimes it is working properly.but more than 4 images are uploaded it is not working.. Means the progress bar is not working properly..but the images are uploaded..
My code is given below
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="init()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
global
{
font-weight: bold;
}
</fx:Style>
<fx:Script>
<![CDATA[
import flash.sampler.NewObjectSample;
import flash.utils.flash_proxy;
import flash.utils.setTimeout;
import mx.charts.renderers.AreaRenderer;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.Request;
import mx.utils.OnDemandEventDispatcher;
private var refAddFiles:FileReferenceList=new FileReferenceList;
private var fileReference:FileReference=new FileReference;
private var arrSelectList:Array=new Array();
private var arrRemoveItem:ArrayCollection=new ArrayCollection();
private var serverSideUrl:String="http://demo.enfintech.net/MultipleFileUpload/fileUploader/uploadFile.php";
// private var serverSideUrl:String="http://192.168.1.60/fileUploader/uploadFile.php";
private var list:Array=new Array();
public var urlReq:URLRequest;
private var refAddFilesLength:int=0;
private var timer:Timer;
private var i:int=0;
private var totalSize:Number=0;
private var isSelected:Boolean=false;
private var images:Object;
private var varSize:Number;
private var numPerc:Number;
public var crnt:Number;
private var fileSizeArray:Array=new Array();
private var fileSize:String;
public var maxm:Number;
private var temp:Number=0;
private var uploadBytes:Number=0;
private var temptotal:Number=0;
private var tempVarSize:Number=0;
private var maximumSize:Number=0;
private var currentSize:Number=0;
private var checkCloseClick:Boolean=false;
[Bindable] private var files:ArrayCollection = new ArrayCollection();
private var fileRefUploadFiles:FileReference=new FileReference;
private function init():void
{
Security.loadPolicyFile("http://demo.enfintech.net/crossdomain.xml");
progressBar2.visible=false;
refAddFiles.addEventListener(Event.SELECT,fileRefSelect);
urlReq = new URLRequest(serverSideUrl);
}
private function fileSelect(event:Event):void
{
Alert.show("");
}
private function fileRefSelect(event:Event):void
{
progressBar2.visible=false;
upload1();
isSelected=true;
}
private function fileRefCompleted(event:Event):void
{
fileReference=event.target as FileReference;
fileReference.removeEventListener(Event.COMPLETE, fileRefCompleted);
fileReference.addEventListener(IOErrorEvent.IO_ERROR,error);
if(fileReference.size!=0)
{
tet2.text=fileReference.size.toString();
varSize=fileReference.size;
var tempVarSizeInBytes:Number=varSize;
fileSizeArray.push(tempVarSizeInBytes);
totalSize=varSize;
varSize=varSize/1024;
fileSize=String(varSize.toFixed(1))+"Kb";
tempVarSize=varSize;
if(varSize>1024)
{
varSize=varSize/1024;
fileSize=String(varSize.toFixed(1))+"Mb";
tempVarSize=varSize;
}
else
{
}
temptotal+=tempVarSizeInBytes;
progressBar2.maximum=temptotal;
}
images= {fileName:fileReference.name,size:fileSize, preview:fileReference.data,close:fileReference.name, maximum:fileReference.size, currentValue:0};
files.addItem(images);
select.enabled=false;
if(checkCloseClick==true)
{
upload0.enabled=true;
}
else
{
}
i=0;
}
private function uploadFiles():void
{
if(files.length==0)
{
Alert.show("Please Select file(s)");
}
else
{
var n:int=files.length;
progressBar2.minimum=0;
if(i<n)
{
progressBar2.visible=true;
fileRefUploadFiles=refAddFiles.fileList[i];
fileRefUploadFiles.upload(urlReq);
fileRefUploadFiles.addEventListener(ProgressEvent.PROGRESS,onUploadProgress);
fileRefUploadFiles.addEventListener(Event.COMPLETE,fileRefUploadFilesComplete);
select.enabled=true;
upload0.enabled=false;
}
}
}
public function onUploadProgress(event:ProgressEvent):void
{
numPerc=Math.round(((event.bytesLoaded+uploadBytes)/temptotal)*100);
files[i].currentValue=event.bytesLoaded;
files[i].maXimumValue=event.bytesTotal;
progressBar2.setProgress(uploadBytes+event.bytesLoaded,temptotal);
progressBar2.validateNow();
progressBar2.label=("UPLOADING "+numPerc.toString()+"% ("+(i+1).toString()+"/"+list.length.toString()+")");
}
private function fileRefUploadFilesComplete(event:Event):void
{
uploadBytes=uploadBytes+Number(fileSizeArray[i]);
i++;
uploadFiles();
}
public function upload1():void
{
list=refAddFiles.fileList;
var i:int=0;
var n:int=list.length;
for(i; i < refAddFiles.fileList.length; i++)
{
list[i].addEventListener(ProgressEvent.PROGRESS,uploadItemRender);
currentSize=crnt;
list[i].addEventListener(Event.COMPLETE, fileRefCompleted);
list[i].load();
}
}
private function uploadItemRender(event:ProgressEvent):void
{
maximumSize=event.bytesTotal;
currentSize=event.bytesLoaded;
}
public function removeItem():void
{
var item:int=dgMain.selectedIndex;
files.removeItemAt(item);
}
private function cancelClick():void
{
fileRefUploadFiles.cancel();
if(files.length!=0)
{
files.removeAll();
fileRefUploadFiles.data.clear();
progressBar2.enabled=false;
}
}
private function browsebtn():void
{
var arr:Array = [];
arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
// fileReference.browse(arr);
refAddFiles.browse(arr);
}
private function titleWindowClose():void
{
var item:int=dgMain.selectedIndex;
files.removeAll();
progressBar2.visible=false;
checkCloseClick=true;
select.enabled=true;
}
]]>
</fx:Script>
<s:TitleWindow x="204" y="10" width="520" height="325" id="titleWindow"
skinClass="TitleSkin" title="File Uploader" close="titleWindowClose()">
<mx:DataGrid id="dgMain" x="0" y="0" width="518" height="237" allowMultipleSelection="true"
dataProvider="{files}" fontFamily="Arial" fontSize="12" headerHeight="0"
horizontalScrollPolicy="off" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn dataField="preview" headerText="Preview" width="40" paddingLeft="5" itemRenderer="ImageDatagrdItmRndr">
</mx:DataGridColumn>
<mx:DataGridColumn dataField="fileName" headerText="Name" width="380" itemRenderer="itmRndrPrgrsBar"/>
<mx:DataGridColumn dataField="size" headerText="Size" width="60"/>
<mx:DataGridColumn id="close" headerText="Size" width="40" itemRenderer="buttonClose"/>
</mx:columns>
</mx:DataGrid>
<mx:ProgressBar id="progressBar2" x="-1" y="237" width="518" barColor="haloblue"
labelPlacement="center" mode="manual" themeColor="#eaeaea"
trackColors="[white,halosilver]"/>
<s:Button id="select" bottom="5" width="87" height="30" label="Select files"
click="browsebtn()" fontFamily="Arial" fontSize="12" horizontalCenter="-91" skinClass="Skin.setButtonSkin"
/>
<s:Button id="upload0" bottom="5" width="79" height="30" label="Upload" click="uploadFiles()"
fontFamily="Arial" fontSize="12" horizontalCenter="0" skinClass="Skin.setButtonSkin"/>
<s:Button id="cancel" bottom="5" width="79" height="30" label="Cancel" fontFamily="Arial"
fontSize="12" horizontalCenter="91" skinClass="Skin.setButtonSkin"/>
</s:TitleWindow>
<s:VGroup>
<s:Label id="tet" color="red" visible="false"/>
<s:Label id="tet2" color="red"/>
</s:VGroup>
</s:Application>
my item render for progressbar is
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true" xmlns:aaronhardy="aaronhardy.*">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
protected function progressBar1_updateCompleteHandler(event:FlexEvent):void
{
SparkProgressBar.maximum=data.maximum;
SparkProgressBar.value=data.currentValue;
}
]]>
</fx:Script>
<aaronhardy:ProgressBar id="SparkProgressBar" maximum="{data.maximum}" minimum="0" skinClass="aaronhardy.ProgressBarSkin" left="0" right="0" top="0" bottom="0" updateComplete="progressBar1_updateCompleteHandler(event)"/>
<s:Label id="lblData" left="0" right="0" text="{dataGridListData.label}" verticalCenter="0"/>
</s:MXDataGridItemRenderer>
And the image itemrender is
<?xml version="1.0" encoding="utf-8"?>
<s:MXDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true">
<fx:Script>
<![CDATA[
]]>
</fx:Script>
<!-- <s:Label id="lblData" top="0" left="0" right="0" bottom="0" text="{dataGridListData.label}" />-->
<mx:Image left="5" width="31" height="20" source="{data.preview}"/>
</s:MXDataGridItemRenderer>
There are good site here. I wish to be helpful for you.