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!
Hi Everyone,
Can any one help me to convert any type of Video files into .flv format (i.e) flash video format.
I mean, if we browse and select any type of video, it (Flex Program) should convert it to .flv format.
Thanks in Advance……
Hey Peter,
Is there anyway to get the width and height of the image that’s loaded?
Thanks,
Ryan
Ryan Pieszak,
Sure. If you’re sure the user selected an image, you could display the loaded ByteArray object into an Image control or Loader and then get the width/height (or contentWidth/contentHeight) after the Image/Loader has finished loading.
Something like this if you’re using a Loader:
private function fileReference_complete(evt:Event):void { img.source = fileReference.data; var ldr:Loader = new Loader(); ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, ldr_complete); ldr.loadBytes(fileReference.data); } private function ldr_complete(evt:Event):void { trace(evt.currentTarget.width, evt.currentTarget.height); }If you’re using the Image tag in the big example above, you could try something like the following:
<Image id="img" verticalCenter="0" horizontalCenter="0" maxWidth="200" maxHeight="200" complete="trace(img.contentWidth, img.contentHeight);" />Hope that helps, Happy Flexing!
Peter
Bingo! I was headed towards the second example, but trying to use img.width and img.height, and they weren’t giving me what I need. Thanks a lot for posting the examples!
Hello. I followed all the steps above and everything seemed to go well until I copy-pasted your code. Whatever I do it gives me a few errors. The problem is that although I’ve been using Flash & as3 for a while this is my first Flex project. Any help would be greatly appreciated. The main three errors are that Flex can’t find mx: Button, Image and Panel.
The last error occurs when I click on the design tab. An error saying “An unknown item is declared as the root of your MXML document. Switch to source mode to correct it”.
I have Adobe Flex builder 3 installed and got the latest version of Gumbo Flex SDK (nightly build). Also I added manually the SDK, checked the export for flash player 10 and downloaded the ocx needed for that flash player (I had only Flash CS3 so flash player 9). :-)
I hope I was clear enough. :-)
Hi Peter,
I am having the same problem like johnny’s. I also followed those step but when I tried to run your code, it returned some errors in the problem window:
//——————–
Could not resolve to a component implementation.
Could not resolve to a component implementation.
Could not resolve to a component implementation.
//——————–
In addition, when I set the RUN mode to call SWF for previewing, it also prompted me the following errors:
//——————–
VerifyError: Error #1053: Illegal override of scaleZ in mx.core.UIComponent.
at flash.display::MovieClip/nextFrame()
at mx.managers::SystemManager/deferredNextFrame()[E:\dev\gumbo_alpha\frameworks\projects\framework\src\mx\managers\SystemManager.as:318]
at mx.managers::SystemManager/preloader_initProgressHandler()[E:\dev\gumbo_alpha\frameworks\projects\framework\src\mx\managers\SystemManager.as:2947]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.preloaders::Preloader/timerHandler()[E:\dev\gumbo_alpha\frameworks\projects\framework\src\mx\preloaders\Preloader.as:398]
at flash.utils::Timer/_timerDispatch()
at flash.utils::Timer/tick()
//——————–
I don’t know how to solve this, please help. Thank you so much!
Oh what happened with “, ,” tags, they didn’t display…I mean the first 3 error messages were about those.
there’s an error..it wont compile due to the application..could you please check why this is..i already copied the mxml and installed the gumbo sdk