How to display an image in Flash datagrid after selecting an image for uploading?

Question

After browsing for the images, and selecting them. How can I display a preview of the image in the datagrid? I am able to display the file name, file size, but was unable to display the image. Below are the codes I have written, please note it is not a complete code but just enough to make it understandable. Thanks.

// variables used
var list:Array = new Array();
var listDP:Array = new Array();
var fileRefList:FileReferenceList;

//dgMain is my DataGrid instance
dgMain.addColumn("name");
dgMain.addColumn("size");

list = fileRefList.fileList; // List of files that user has selected

for(var i:Number = 0; i < list .length; i++) 
{
   list_dp.push({name:list[i].name, size:Math.round(list[i].size / 1000) + " kb"});
}

dgMain.dataProvider = new DataProvider(list_dp);
dgMain.spaceColumnsEqually();

Answer 1

Good question. Just load each of the images when you hear the Event.SELECT event on FileReferenceList. Then create an itemRenderer for the datagrid that can display the returned ByteArray. Here's an example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="creationCompleteHandler()">


    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            // variables used
            var list:Array;
            var files:ArrayCollection = new ArrayCollection();
            var fileReferenceList:FileReferenceList = new FileReferenceList();

            protected function creationCompleteHandler():void
            {
                fileReferenceList.addEventListener(Event.SELECT, selectHandler);
            }

            protected function selectHandler(event:Event):void
            {
                load();
            }

            protected function completeHandler(event:Event):void
            {
                var fileReference:FileReference = event.target as FileReference;
                var token:Object = {name:fileReference.name, size:Math.round(fileReference.size / 1000) + " kb", preview:fileReference.data};
                files.addItem(token);
            }

            public function load():void
            {
                list = fileReferenceList.fileList; // List of files that user has selected
                var i:int = 0;
                var n:int = list.length
                for(i; i < n; i++) 
                {
                    list[i].addEventListener(Event.COMPLETE, completeHandler);
                    list[i].load();
                }
            }

        ]]>
    </mx:Script>

    <mx:Button label="browse" click="fileReferenceList.browse()"/>

    <mx:DataGrid id="dgMain"
        dataProvider="{files}"
        horizontalScrollPolicy="on"
        allowMultipleSelection="true" rowHeight="25">
        <mx:columns>
            <mx:DataGridColumn dataField="preview" headerText="preview">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:Canvas verticalCenter="0" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                            <mx:Image source="{data.preview}" width="20" height="20"/>
                        </mx:Canvas>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn dataField="name" headerText="Name" />
            <mx:DataGridColumn dataField="size" headerText="Size" />
        </mx:columns>
    </mx:DataGrid>
</mx:Application>

If this solved the issue, mark it as correct :).

Best, Lance