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.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?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/mx"
        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>

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:

<?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/mx"
        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:

<?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/mx"
        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.

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

  1. 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. 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. You don’t really have to use flex sdk 4, because FileReference is class of flash player, not skd.

  4. 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

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

    1. I have a similar requirement.
      I want to avoid having the dialog box pop up again and again for multiple downloads.
      Is there anyway to avoid it?

    2. don’t believe so. I’m assuming it’s an anti-spyware/anti-hacker feature that the user must be warned that flash is saving a file.

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

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

  8. 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

  9. 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

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

  11. 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..

  12. 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.

  13. Hi Peter,

    Is it possible to open a FileReference:save dialog in ResultHandler of some function ?

    Please share the information as soon as possible..

    Thanks in Advance.

  14. I used the save as text with filereference class and it works. But how can I save text in the following order?

    [Inspection Begin]
    Type=2
    Fields=SEG_ID;Upstream_MH;Downstream_MH;
    Data=21204014-21204013;21204014;21204013;
    [Inspection End]

    Thanks,

  15. I want to open the file without having save dialog box:
    Following is my requirment.
    I will be getting the pdf file as base64 encoded blob object from webservice service and i have to open that file to the user.
    I was able to decode it and able to convert into byteArray.And gave that byteArray to fileReference.Save method, But i dont want to save the file locally jst need to open it..Is there a way to do to..please help me….Thanks in advance…

  16. Hi Peter,

    - How can we save a file directly without asking user from save dialog of FileReference.save()?
    - Is there any work around to achive this in flex(web application)??

  17. Hi Peter,

    Your code don’t working well :(
    If I change the “file name” (describeType) into the selection dialog, your code will save the picture without extension so it poor and unusable…

    Is there any good script?

    Thanks
    labi

  18. Is it possible to save multiple files using different file references in the same function? Like saving multiple components in a single mxml file as pngs,jpgs, csv, etc?

  19. Hi All,
    I have same requirement to save the file in default location without showing the dialog box!!
    Please write you get something on this.
    thanks in advance :) :)

  20. Hi all friends,

    I have a problem when I call FileReference.save() to save file image but it don’t show Dialog to save. I use Flex 3.2 and flash 10.
    I don’t know why ?

    Thanks.

Comments are closed.