Previewing an image before uploading it using the FileReference class in Flash Player 10

The following example shows how you can browse for an image file from your local file system and preview the image before uploading it to a remote webserver by using the FileReference class’s new load() method in Flash Player 10. Once the user has browsed and selected an image from their local machine, you can call the load() method which dispatches a complete event when the image has successfully loaded, at which point you can display the image using a Flex Image control and setting the Image instance’s source property to the FileReference class’s data property (which is a ByteArray).

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/25/previewing-an-image-before-uploading-it-using-the-filereference-class-in-flash-player-10/ -->
<Application name="FileReference_load_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library:adobe/flex/halo"
        xmlns:net="flash.net.*"
        layout="flex.layout.BasicLayout">

    <Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.utils.ObjectUtil;

            private function btn_click(evt:MouseEvent):void {
                var arr:Array = [];
                arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
                fileReference.browse(arr);
            }

            private function fileReference_select(evt:Event):void {
                fileReference.load();
            }

            private function fileReference_complete(evt:Event):void {
                img.source = fileReference.data;
                Alert.show(ObjectUtil.toString(fileReference));
            }
        ]]>
    </Script>

    <Declarations>
        <net:FileReference id="fileReference"
                select="fileReference_select(event);"
                complete="fileReference_complete(event);" />
    </Declarations>

    <mx:Panel id="panel"
            layout="absolute"
            horizontalCenter="0"
            verticalCenter="0"
            width="500"
            height="300">
        <mx:Image id="img"
                verticalCenter="0"
                horizontalCenter="0"
                maxWidth="200"
                maxHeight="200" />
        <mx:ControlBar>
            <mx:Button id="btn"
                    label="Browse and preview..."
                    click="btn_click(event);" />
            <mx:Button label="Upload..."
                    enabled="false" />
        </mx:ControlBar>
    </mx:Panel>

</Application>

View source is enabled in the following example.

For more information on the new FileReference capabilities in Flash Player 10, see the Flex Gumbo documentation at http://livedocs.adobe.com/flex/gumbo/langref/flash/net/FileReference.html.