How to display images from FileReferenceList?

Question

I have a FileReferenceList from which I'd like to display images in a DataGrid; currently I'm getting the following error: Only one download, upload, load or save operation can be active at a time on each FileReference. Following is my code; anyone know how to resolve the error I'm getting? Thanks.

Here is my DataGrid:

<s:Panel>
<mx:DataGrid id="imageGrid" width="100%" height="100%" dataProvider="{imageFiles}">
<mx:columns>
<mx:DataGridColumn itemRenderer="renderers.GridImgRenderer" headerText="Image"/>
<mx:DataGridColumn dataField="name" headerText="Image Name"/>
<mx:DataGridColumn dataField="size" headerText="Image Size"/>
</mx:columns>
</mx:DataGrid>
<s:controlBarContent>
<s:Button id="browse" label="Browse" click="browseHandler(event)"/>
<s:Button id="upload" label="Upload"/>
</s:controlBarContent>
<s:controlBarLayout>
<s:HorizontalLayout horizontalAlign="center" paddingBottom="5" paddingTop="5"/>
</s:controlBarLayout>
</s:Panel>

Here's my renderer:

<?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" creationComplete="init()">
<fx:Script>
<![CDATA[
private function init():void
{
data.addEventListener(Event.COMPLETE, function(event:Event):void 
{
imagePreview.source = event.target.data;
});
data.load();
}
]]>
</fx:Script>
<mx:Image id="imagePreview" width="200" maintainAspectRatio="true" scaleContent="true"/>
</s:MXDataGridItemRenderer>

Answer 1

Well for starters, your renderer is wrong. You'll run into problems when they are recycled.

To answer your main question, you are probably running into the security issue around file access and user initiated events.

Its a thorny issue and I suggest reading the documentation on it!