create image preview using flex

I am working on flex image uploader.as soon as you select images I am showing the image name, size. I want to show the thumbnail of the image too..so that you can preview the image before uploader.

I have added the code which I am using to show preview before upload..

can any body tell me how to achieve it.?

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                xmlns:net="flash.net.*"


                paddingTop="5"

                paddingLeft="5"

                paddingRight="5"

                paddingBottom="5"

                layout="vertical"

                applicationComplete="init();">

    <mx:Panel width="100%" 

              height="100%" 

              title="Upload List" 

              horizontalAlign="center">

        <mx:DataGrid id="fileList" width="100%" height="100%" rowHeight="50"

                     dataProvider="{uploadQueue}">

            <mx:columns>

                <mx:DataGridColumn headerText="Filename" dataField="name"/>

                <mx:DataGridColumn headerText="Progress" dataField="progress"/>

                <mx:DataGridColumn headerText="Preview"  

                                   width="65"

                                   dataField="preview" 

                                   itemRenderer="mx.controls.Image">

                </mx:DataGridColumn>

            </mx:columns>

        </mx:DataGrid>

        <mx:ControlBar>

            <mx:HBox width="100%" horizontalAlign="center">

                <mx:ButtonBar horizontalGap="2" itemClick="butto开发者_开发知识库nHandler(event)">

                    <mx:dataProvider>

                        <mx:Object label="Select Files"/>

                        <mx:Object label="Start Upload"/>

                    </mx:dataProvider>

                </mx:ButtonBar>

            </mx:HBox>

        </mx:ControlBar>

    </mx:Panel>

    <mx:Script>

        <![CDATA[

            // Imports

            import mx.events.ItemClickEvent;

            import flash.net.FileReference;

            import flash.net.FileReferenceList;

            import mx.collections.ArrayCollection;

            import flash.net.FileFilter;

            import mx.controls.Alert;

            import flash.utils.ByteArray;

            import flash.events.Event;

            import mx.formatters.NumberFormatter;

            // Constants

            public const imageUrl:String = "http://dev/flexFiles/";

            public const uploadPath:String = "http://dev/flexUploader.php?id=";



            // Properties

            public var uploadList:FileReferenceList;

            private var uploadURL:URLRequest;

            private var currentFile:Object;

            private var currF:Object;

            private var imageTypes:FileFilter;

            [Bindable] public var uploadQueue:ArrayCollection = new ArrayCollection();

            public function init():void{

                // create an instance of the File Reference List

                uploadList = new FileReferenceList();

                uploadList.addEventListener(Event.SELECT,populateDataGrid);



                // set the upload URL

                uploadURL = new URLRequest();

                // set the file filter type

                imageTypes = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");



            }

            private function buttonHandler(event:ItemClickEvent):void{



                switch(event.label){



                    case 'Select Files':

                        uploadList.browse([imageTypes]); 

                        break;



                    case 'Start Upload':

                        uploadNextFile();

                        break;

                }

            }

            private function populateDataGrid(event:Event):void{

                // remove any previous entries in the upload list

                uploadQueue.removeAll();



                // add all the new items

                for each( var file:FileReference in uploadList.fileList){


                    file.load();
                    file.addEventListener(Event.COMPLETE, loadCompleted);
                    currF = file; 


                }

            }


            private function loadCompleted(event:Event):void{


                uploadQueue.addItem({name:currF.name,

                    progress:'Ready',

                    preview: currF.data

                });


            }

            private function uploadNextFile():void{

                var file:FileReference;



                // get the next file from the queue

                for each(var o:Object in uploadQueue){





                    // if we find a ready status, then start the upload

                    if (o.progress=="Ready"){

                        // save the current object for updating

                        currentFile= o;



                        // update the progress

                        o.progress="Initializing Upload";

                        uploadQueue.itemUpdated(currentFile); // force a refresh



                        // grab the file reference

                        file = o.fileRef;



                        // add event listeners

                        file.addEventListener(Event.COMPLETE, uploadComplete);

                        file.addEventListener(ProgressEvent.PROGRESS, uploadProgress);

                        file.addEventListener(IOErrorEvent.IO_ERROR, uploadError);



                        // generate an ID for this upload

                        o.uploadId=Math.round(Math.random() * (5000 - 1000));



                        // upload the file

                        uploadURL.url = uploadPath + o.uploadId ;

                        file.upload(uploadURL);



                        return;

                    }    



                }



                uploadQueue.itemUpdated(currentFile); // force a refresh

            }

            private function uploadComplete(event:Event):void{

                // Mark the upload as completed

                currentFile.progress="Complete: " + currentFile.progress;

                // set the uploaded image src

                currentFile.preview=imageUrl + 

                    currentFile.uploadId + "_" +

                    currentFile.fileRef.name;

                // find the next upload

                uploadNextFile();

            }

            private function uploadProgress(event:ProgressEvent):void{

                currentFile.progress = event.bytesLoaded + " of " + event.bytesTotal;

                uploadQueue.itemUpdated(currentFile);

            }

            private function uploadError(event:Event):void{

                currentFile.progress="Error!";

                uploadQueue.itemUpdated(currentFile); // force a refresh

                // find the next upload

                uploadNextFile();

            }

        ]]>

    </mx:Script>



</mx:Application>

The user must be running Flash Player 10+/Air 1.5+ - you cannot do this in Flash Player 9.

You can use the FileReference.load() method to load a local file into the application: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/FileReference.html#load%28%29

The following restrictions will apply:

• Make sure you have received the Complete event in response to FileReference.load() before calling FileReference.upload().

• Make sure to call FileReference.upload() in response to a user event (e.g. key or button press). So have a "click to upload" button and trigger the uploading in response to that event handler.