Saving files locally using the FileReference class’s save() method in Flash Player 10

by Peter deHaan on August 25, 2008

The following example shows how you can use the FileReference class’s new save() method in Flash Player 10 to save text, XML, and image files to a user’s hard drive.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/25/saving-files-locally-using-the-filereference-classs-save-method-in-flash-player-10/ -->
<s:Application name="FileReference_save_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/halo"
        xmlns:net="flash.net.*"
        creationComplete="init();">
 
    <fx:Script>
        <![CDATA[
            private function init():void {
                textArea.text = describeType(FileReference).toXMLString();
            }
 
            private function btn_click(evt:MouseEvent):void {
                fileReference.save(textArea.text, "describeType.txt");
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <net:FileReference id="fileReference" />
    </fx:Declarations>
 
    <s:Panel id="panel"
            width="500" height="300"
            verticalCenter="0" horizontalCenter="0">
        <s:controlBarContent>
            <s:Button id="btn"
                    label="Save Text"
                    click="btn_click(event);" />
        </s:controlBarContent>
        <s:TextArea id="textArea"
                editable="true"
                width="100%"
                height="100%" />
    </s:Panel>
 
</s:Application>

You can also pass the XML object directly to the FileReference class’s save() method, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/25/saving-files-locally-using-the-filereference-classs-save-method-in-flash-player-10/ -->
<s:Application name="FileReference_save_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/halo"
        xmlns:net="flash.net.*"
        creationComplete="init();">
 
    <fx:Script>
        <![CDATA[
            private const xmlObj:XML = describeType(FileReference);
 
            private function init():void {
                textArea.text = xmlObj.toXMLString();
            }
 
            private function btn_click(evt:MouseEvent):void {
                fileReference.save(xmlObj, "describeType.xml");
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <net:FileReference id="fileReference" />
    </fx:Declarations>
 
    <s:Panel id="panel"
            width="500" height="300"
            verticalCenter="0" horizontalCenter="0">
        <s:controlBarContent>
            <s:Button id="btn"
                    label="Save"
                    click="btn_click(event);" />
        </s:controlBarContent>
        <s:TextArea id="textArea"
                editable="true"
                width="100%"
                height="100%" />
    </s:Panel>
 
</s:Application>

Or, you can use the ImageSnapshot class to take a screenshot of an item on the display list and save it to the user’s hard drive by passing a ByteArray object to the FileReference class’s save() method, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/25/saving-files-locally-using-the-filereference-classs-save-method-in-flash-player-10/ -->
<s:Application name="FileReference_save_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/halo"
        xmlns:net="flash.net.*"
        creationComplete="init();">
 
    <fx:Script>
        <![CDATA[
            import mx.graphics.ImageSnapshot;
            import mx.graphics.codec.*;
 
            private const jpegEnc:JPEGEncoder = new JPEGEncoder();
            private const xmlObj:XML = describeType(FileReference);
 
            private function init():void {
                textArea.text = xmlObj.toXMLString();
            }
 
            private function btn_click(evt:MouseEvent):void {
                var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(panel, 0, jpegEnc);
                fileReference.save(imageSnap.data, "describeType.jpg");
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <net:FileReference id="fileReference" />
    </fx:Declarations>
 
    <s:Panel id="panel"
            width="500" height="300"
            verticalCenter="0" horizontalCenter="0">
        <s:controlBarContent>
            <s:Button id="btn"
                    label="Save"
                    click="btn_click(event);" />
        </s:controlBarContent>
        <s:TextArea id="textArea"
                editable="true"
                width="100%" height="100%" />
    </s:Panel>
 
</s: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.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

Tagged as: captureImage(), Gumbo, JPEGEncoder, needsSWF, save()

{ 22 comments… read them below or add one }

1 alex September 24, 2008 at 10:53 am

perfect THX this help me sooooooo much… this is the first working example I’ve found… this whole site is awesome.. thx for your work

2 peterd September 24, 2008 at 1:07 pm

Disclaimer, this entry was written with a beta version of Flash Player 10 and Flex Gumbo. This code could change/break at any point in the future.

For example, I believe that this:

<Application xmlns="http://ns.adobe.com/mxml/2009"
        layout="flex.layout.BasicLayout">
...
</Application>

May now need to be changed to this:

<Application xmlns="http://ns.adobe.com/mxml/2009">
    <layout><BasicLayout /></layout>
...
</Application>

Peter

3 gino8080 December 10, 2008 at 7:34 am

how to save a animated GIF without PHP serverside?
is possible to use the good GifEncoder class by http://www.bytearray.org/ ?

4 P. Subrel March 19, 2009 at 11:17 pm

You don’t really have to use flex sdk 4, because FileReference is class of flash player, not skd.

5 Abir Pat April 3, 2009 at 10:28 pm

P. Subrel,
We do need Gumbo (Flex 4 SDK) and Flash Player 10 for fileReference.save method

6 Abir Pat April 3, 2009 at 10:32 pm

Sorry,

We only need Flash Player 10 for fileReference.save method.
I tried it with an older Flex SDK: 3.2 and new Flash Player 10 and it works

7 sayali April 7, 2009 at 2:46 am

Can’t we save the file without havinf opened the dialog box? I mean to say, can’t we give path for saving file and avoid the dialog box?

8 wing April 7, 2009 at 4:55 am

After clicking “Save text” button, txt file extension is not shown in the dialog box…
How to solve?

9 Rohit Tailor April 29, 2009 at 11:01 pm

Can we have same functionality in Flex 3 using Flash Player 9 ? If any please give some solution.

10 Anonymous May 15, 2009 at 6:44 am

I have a requirement where I want to open up a ” Save as” Dailog box inorder for user to save the files.
I know that how to write the same code if i have a button using FileReference Class(http://blog.flexexamples.com/2008/08/25/creating-a-filereference-object-using-mxml-in-flex)
But I want to write the same kind of code when an alert pops up asking to save (YES/NO) & I click yes.In nut shell I want to the above functionality but not on Button.
Hope I am clear in explaining the requirement.If not get back to me so as to understand the requirement

Regards
Kalavati Singh
kalavati_singh@yahoo.co.in

11 Peter deHaan May 15, 2009 at 8:19 am

Kalavati Singh,

Something like this?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.CloseEvent;

            private var alrt:Alert;
            private var fileRef:FileReference;

            private function showAlert():void {
                alrt = Alert.show("Do you want to upload a file",
                            "Well, do you?",
                            Alert.YES|Alert.NO,
                            null,
                            alrt_close);
            }

            private function alrt_close(evt:CloseEvent):void {
                switch (evt.detail) {
                    case Alert.YES:
                        fileRef = new FileReference();
                        fileRef.addEventListener(Event.SELECT, fileRef_select);
                        fileRef.browse();
                        break;
                    case Alert.NO:
                        // do nothing
                        break;
                }
            }

            private function fileRef_select(evt:Event):void {
                Alert.show(evt.currentTarget.name);
            }
        ]]>
    </mx:Script>

    <mx:Button id="btn"
            label="Click to upload file"
            click="showAlert();" />

</mx:Application>

Peter

12 mohan May 21, 2009 at 2:49 am

im using Flash 10 and sdk 3.2 but the above example is not working and i did not create the application as a component

13 ickydime October 27, 2009 at 1:53 pm

Your image example is having the same bug we are experiencing in a current project. If you change the default fileName, it removes the “.jpg” extension. And you can’t used the extension parameter since it is not an Air App. Any suggestions?

14 Peter deHaan October 27, 2009 at 3:18 pm: @ickydime,

I believe it is a known issue, but can you please submit an AIR bug report at http://www.adobe.com/go/wish and include any relevant information (OS, AIR version, etc) and any useful code.

Thanks,
Peter

Reply
15 Peter deHaan October 27, 2009 at 3:19 pm: Oh sorry, you said NOT an Adobe AIR app. In that case can you please submit a bug report at http://bugs.adobe.com/flashplayer/ (if you cannot find an existing issue in the bug base).

Thanks,
Peter

Reply

16 aravindakumar October 30, 2009 at 2:57 am

hi All,
In flex 3 web application how to set default save location for images?
Thanks.

17 Kingz November 17, 2009 at 8:25 am

Hi..
am Usinf sdk 4. & flash player 10. i get an error.
Could not resolve to a component implementation.
How to solve this problem help plz..

18 Peter deHaan November 18, 2009 at 10:30 am

Updated samples to compile against 4.0.0.11851.

19 Artem November 21, 2009 at 10:23 am

how can i save mp3 (from URL) loaded into Sound to disk ?

20 Artem November 21, 2009 at 10:52 am: sorry, now i found download method of FileReference class

Reply

21 aqeel January 3, 2010 at 4:26 am

hi, how to save the contens of canvas into pdf format? appriciate your detailed reply on this
thanks
aqeel

22 JanCK January 27, 2010 at 5:31 am

This is helpfull to know: click(evt:MouseEvent)
Allways use a function with a MouseEvent to get save() working!
Took me a while to find it out – might save someones time.

Saving files locally using the FileReference class’s save() method in Flash Player 10

Pages

Recent Posts

Archives

But wait, there’s more…

Advertising

Saving files locally using the FileReference class’s save() method in Flash Player 10

Pages

Recent Posts

Archives

Blogroll

But wait, there’s more…

Advertising