25
Aug
08

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

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.

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/saving-files-locally-using-the-filereference-classs-save-method-in-flash-player-10/ -->
<Application name="FileReference_save_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library:adobe/flex/halo"
        xmlns:net="flash.net.*"
        layout="flex.layout.BasicLayout"
        creationComplete="init();">

    <Script>
        <![CDATA[
            private function init():void {
                textArea.text = describeType(FileReference).toXMLString();
            }

            private function btn_click(evt:MouseEvent):void {
                fileReference.save(textArea.text, "describeType.txt");
            }
        ]]>
    </Script>

    <Declarations>
        <net:FileReference id="fileReference" />
    </Declarations>

    <mx:Panel id="panel"
            width="500"
            height="300"
            verticalCenter="0"
            horizontalCenter="0">
        <mx:TextArea id="textArea"
                editable="true"
                width="100%"
                height="100%" />
        <mx:ControlBar horizontalAlign="right">
            <Button id="btn"
                    label="Save Text"
                    click="btn_click(event);" />
        </mx:ControlBar>
    </mx:Panel>

</Application>

View source is enabled in the following example.

You can also pass the XML object directly 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/ -->
<Application name="FileReference_save_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library:adobe/flex/halo"
        xmlns:net="flash.net.*"
        layout="flex.layout.BasicLayout"
        creationComplete="init();">

    <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");
            }
        ]]>
    </Script>

    <Declarations>
        <net:FileReference id="fileReference" />
    </Declarations>

    <mx:Panel id="panel"
            width="500"
            height="300"
            verticalCenter="0"
            horizontalCenter="0">
        <mx:TextArea id="textArea"
                editable="true"
                width="100%"
                height="100%" />
        <mx:ControlBar horizontalAlign="right">
            <Button id="btn"
                    label="Save"
                    click="btn_click(event);" />
        </mx:ControlBar>
    </mx:Panel>

</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/ -->
<Application name="FileReference_save_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library:adobe/flex/halo"
        xmlns:net="flash.net.*"
        layout="flex.layout.BasicLayout"
        creationComplete="init();">

    <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");
            }
        ]]>
    </Script>

    <Declarations>
        <net:FileReference id="fileReference" />
    </Declarations>

    <mx:Panel id="panel"
            width="500"
            height="300"
            verticalCenter="0"
            horizontalCenter="0">
        <mx:TextArea id="textArea"
                editable="true"
                width="100%"
                height="100%" />
        <mx:ControlBar horizontalAlign="right">
            <Button id="btn"
                    label="Save"
                    click="btn_click(event);" />
        </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.


12 Responses to “Saving files locally using the FileReference class's save() method in Flash Player 10”


  1. 1 alex Sep 24th, 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. 2 peterd Sep 24th, 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. 3 gino8080 Dec 10th, 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. 4 P. Subrel Mar 19th, 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. 5 Abir Pat Apr 3rd, 2009 at 10:28 pm

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

  6. 6 Abir Pat Apr 3rd, 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. 7 sayali Apr 7th, 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. 8 wing Apr 7th, 2009 at 4:55 am

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

  9. 9 Rohit Tailor Apr 29th, 2009 at 11:01 pm

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

  10. 10 Anonymous May 15th, 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. 11 Peter deHaan May 15th, 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. 12 mohan May 21st, 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

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".




Badge Farm

  • Powered by Redoable 1.2
  • Cornify
  • Feeds burnt by Feedburner
  • Feed