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″.
<?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.




thanks!
btw why don’t colorize code my Flex Builder 3 (with installed Gumbo SDK) in <Script/> block?
also code completion do not work too.
i gues is for sake of xmlns=”http://ns.adobe.com/mxml/2009″
can i fix it some how?
Nice to not have to actually upload the images before displaying them! ( I had to do that using v9 )
How would you do this in Flash player 9 exactly?
Geert,
In Flash Player 9, you’d need to upgrade to Flash Player 10. (It’s a new feature in Flash Player 10)
Peter
Hi Peter,
Yes I understand. But my question was how you can preview the image an image before uploading it in Flash player 9 (not using the new Flash player 10). I’ve been looking for an example, but couldn’t find one up till now.
Geert,
As far as I know, this is not possible in Flash Player 9, it was a new API/feature added in Flash Player 10.
Peter
possible to do with SDK3????…..
acidguy,
I do not think this is possible with the Flex 3 SDK. Although you could try downloading the latest Flex 3.2 SDK and running this with Flash Player 10.
Peter
peterd,
this is possible in SDK 3.2 . I just had to do something like this and it works just fine!