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

Aug

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

By Peter deHaan

Categories: FileReference and beta Tags: browse(), data, FileFilter, FileReference, Gumbo, load().

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.

31 Responses to “Previewing an image before uploading it using the FileReference class in Flash Player 10”

Feed for this Entry View blog reactions

1 sergio Aug 26th, 2008 at 12:56 am

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?
2 Kevin Eleven Aug 26th, 2008 at 10:31 am

Nice to not have to actually upload the images before displaying them! ( I had to do that using v9 )
3 Geert Sep 12th, 2008 at 8:00 am

How would you do this in Flash player 9 exactly?
4 peterd Sep 12th, 2008 at 8:10 am

Geert,

In Flash Player 9, you’d need to upgrade to Flash Player 10. (It’s a new feature in Flash Player 10)

Peter
5 Geert Sep 12th, 2008 at 12:29 pm

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.
6 peterd Sep 12th, 2008 at 4:06 pm

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
7 acidguy Oct 3rd, 2008 at 7:04 pm

possible to do with SDK3????…..
8 peterd Oct 3rd, 2008 at 8:54 pm

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
9 Stormbreaker Nov 16th, 2008 at 9:53 am

peterd,

this is possible in SDK 3.2 . I just had to do something like this and it works just fine!
10 deenalex Dec 2nd, 2008 at 11:58 pm

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……
11 Ryan Pieszak Dec 7th, 2008 at 12:43 am

Hey Peter,

Is there anyway to get the width and height of the image that’s loaded?

Thanks,
Ryan

12 Peter deHaan Dec 7th, 2008 at 1:45 am

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

13 Ryan Pieszak Dec 7th, 2008 at 3:58 pm

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!
14 johnny Dec 23rd, 2008 at 3:25 am

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. :-)
15 Scarlet sail Dec 28th, 2008 at 7:00 pm

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!
16 Scarlet sail Dec 28th, 2008 at 7:03 pm

Oh what happened with “, ,” tags, they didn’t display…I mean the first 3 error messages were about those.
17 pao Jan 4th, 2009 at 9:00 am

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
18 randygland Jan 7th, 2009 at 8:46 am

then how do u upload the user’s selected JPG!!?
19 gotjosh Jan 9th, 2009 at 4:09 am

Are there known issues with this on Mac??
20 aap Jan 26th, 2009 at 9:54 pm

Hi,
Can we use the bytearray from File reference object and use the thumbnail information in the JPEG to show preview of image of size>50MB.
21 suresh Feb 6th, 2009 at 12:33 am

Please Help

Me i wanted to upload a jpeg file from the server crop it to the restricted size, user can keep the cropping size any where on the picture so that the particular thing is saved when we save it

I am planning to do the above, i am a great fan of urs, i learn things from your site, but i am into trouble tried googling, various things but could not found out, so finally ended up beliving you can help me.

Please suggest me something, i am facing issues with the above eg, even though i have flex builder 3.02, flashplayer 10 and flex sdk flex_sdk_4.0.0.4845

i am facing the following errors

A unknown item is declared as the root of your MXML document.Switch to source mode to correct it

The prefix “net” for element “net:FileReference” is not bound.
22 suresh Feb 8th, 2009 at 11:15 pm

Dear Peter,

I was checking the site from Friday night more than 10 times , I know you ll be busy.
Please let me know the solution once you are done :-) i am facing the bug.
Thanks in advance

Suresh
23 Ibrahim Ersoy Feb 13th, 2009 at 7:25 pm

hey Thanks for the source code.But how can i convert it to Flex 2? i have a project and cant upgrade to flex 3 right now. Any option how can i do this in Flex 2?

Thank u so much
24 Craig Feb 20th, 2009 at 9:09 am

Really nice
25 Garth Braithwaite Feb 20th, 2009 at 6:40 pm

Very nice. I’ll be playing around with it.
26 ropo Feb 27th, 2009 at 7:02 am

If Flex Builder tells you that .load() is undefined you have to select the correct SDK

!AND!

check “Require flash player version 10.0.0″
27 Jasen Burkett Apr 5th, 2009 at 7:45 pm

is there any app out there or tutorial for as3? and flash? not flex?

thanks

here is a good one for you.

I have used countless flash as3 uploaders. they all work.
however, when flash goes to retrieve the image and show it in
a photo gallery, or news slider, flash for some reason can not
see that the image is there, and so it throws a error.

if I upload the images by hand using ftp, flash has no problems
seeing the images on the server. why is that?
28 denns Apr 14th, 2009 at 4:12 am

hi, i tried this using a filereferencelist for uploading multiple files, but now there is the problem that if i take bigger files (like from a digital camera) the browser will use about 1GB of RAM. Is there any possibility to reduce the ram usage somehow?? any different kind of loading the picture or downscale it somehow??
29 kamrul Apr 19th, 2009 at 1:00 pm

i am very bigenner in flex. i am trying to load image using your reference but it showes some error when i complile it. pls can someone help me how can i do it……
30 Ady Levy Jun 7th, 2009 at 2:33 pm

i’ve released a source code for image preview and manipulation before upload + php script for image reciving in server.

check out : http://www.adylevy.com/index.php/2009/06/07/client-side-image-resize-flash-cs4-filereferencedata/

Ady.
31 Gilbert Jul 2nd, 2009 at 1:44 pm

Peter,

I tested it on Flex 3.3 and it works fine for images.

Is it possible to load a video with a similar method?
If so, how can be done?

I tried, but the fileReference.data is a ByteArray and the video.source expects a String.

Thanks,

Gilbert