Using the new FileReference Class in Flex to save and load without a server

5 Jun
2008
Delicious

In the new Flash Player 10, you will be able to write/read files without the need to send anything back to the server. Here are two examples using Flex, the first one is a Text-Pad where you are allowed to load a text file and save it without a need to communicate back to the server. The Second Example is similar but uses images instead. You are only allowed to upload PNG files in this example only. Also, there is a bug which supposedly got fixed but your are not allowed to overwrite the file you uploaded and when you are saving add “.txt” extension or “.png” extension, otherwise you can refresh the page and start again. In short, First time you hit save do not include the extension, second time you need to include the extension and remember to not overwrite anything otherwise it will crash.
EDIT: Ok it should work Now

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	  <mx:Script>
	  	<![CDATA[
 
 
 
	  		/**
	  		 * @private
	  		 * The FileReference that does the saving and the loading
	  		 */
	  		 private var fileReference:FileReference = new FileReference();
	  		private function onSaveText():void
	  		{
	  			fileReference.save(myText.text,"myText.txt");
	  		}
	  		private function onLoadText():void
	  		{
	  			var f:FileFilter = new FileFilter("Text","*.txt");
	  			fileReference.browse([f]);
	  			fileReference.addEventListener(Event.SELECT,onFileSelect);
	  			fileReference.addEventListener(Event.COMPLETE,onFileComplete);
	  		}
	  		private function onFileSelect(event:Event):void
	  		{
	  			fileReference.load();
	  		}
	  		private function onFileComplete(event:Event):void
	  		{
	  			myText.text = fileReference.data.readUTFBytes(fileReference.data.length);
	  		}
 
	  	]]>
	  </mx:Script>
 
	  <mx:Panel id="myPanel" width="400" height="450" verticalScrollPolicy="off"
	  	 horizontalScrollPolicy="off" title="Text Pad">
	  	<mx:TextArea width="380" height="420" id="myText"
	  		text="Hello You Can Save This to test this APP"/>
	  	<mx:ControlBar>
	  		<mx:Button label="Save Text" click="onSaveText()"/>
	  		<mx:Button label="Load Text" click="onLoadText()"/>
	  	</mx:ControlBar>
	  </mx:Panel>
 
 
 
 
</mx:Application>

Here is a PNG image you can save and try to upload.
PNG Image

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	  <mx:Script>
	  	<![CDATA[
	  		import mx.controls.Image;
	  		import mx.utils.Base64Decoder;
	  		import mx.core.UIComponent;
	  		import mx.binding.utils.BindingUtils;
	  		import mx.graphics.codec.PNGEncoder;
 
 
	  		[Embed(@source="Adobe Flex 3.png",mimeType="image/png")]
	  		private var myFlex:Class;
 
	  		private var myBitmap:Bitmap = new myFlex();
 
 
	  		private var pngDecoder:Base64Decoder = new Base64Decoder();
 
	  		/**
	  		 * @private
	  		 * The FileReference that does the saving and the loading
	  		 */
	  		 private var fileReferenceLoad:FileReference = new FileReference();
	  		 /**
	  		 * @private
	  		 * For the Save
	  		 */
	  		 private var fileReferenceSave:FileReference= new FileReference();
	  		private function onSaveImage():void
	  		{
	  			var pngEncoder:PNGEncoder = new PNGEncoder();
	  			var myByteArray:ByteArray = pngEncoder.encode(myBitmap.bitmapData);
	  			fileReferenceSave.save(myByteArray,"flex.png");
	  		}
	  		private function onLoadImage():void
	  		{
	  			var f:FileFilter = new FileFilter("PNG","*.png");
	  			fileReferenceLoad.browse([f]);
	  			fileReferenceLoad.addEventListener(Event.SELECT,onFileSelect);
	  			fileReferenceLoad.addEventListener(Event.COMPLETE,onFileComplete);
	  		}
	  		private function onFileSelect(event:Event):void
	  		{
	  			fileReferenceLoad.load();
	  		}
 
	  		private function onFileComplete(event:Event):void
	  		{
	  			var a:ByteArray = fileReferenceLoad.data;
	  			var image:Image = new Image();
	  			image.load(a);
	  			myPanel.addChild(image);
 
	  		}
	  		protected override function createChildren():void
	  		{
	  			super.createChildren();
	  			var t:UIComponent = new UIComponent();
	  			myPanel.addChild(t);
	  			t.addChild(myBitmap);
	  		}
 
	  	]]>
	  </mx:Script>
 
	  <mx:Panel id="myPanel" width="400" height="450" verticalScrollPolicy="off"
	  	 horizontalScrollPolicy="off" title="Image Pad">
 
	  	<mx:ControlBar>
	  		<mx:Button label="Save Image" click="onSaveImage()"/>
	  		<mx:Button label="Load Image" click="onLoadImage()"/>
	  	</mx:ControlBar>
	  </mx:Panel>
 
 
 
 
</mx:Application>
Incoming Search Terms :flex filereference , filereference load , flex filereference load , filereference flex , property load not found on flash net filereference and there is no default value , call to a possibly undefined method save through a reference with static type flash net:filereference , call to a possibly undefined method load through a reference with static type flash net:filereference , 1061: call to a possibly undefined method save through a reference with static type flash net:filereference , flex save file , flex filereference save

Share this story with a friend !
Join SherifAbdou's Rss Feed Stumble This Article! Add this to your Delicious Bookmarks! Digg this story ! Add this story to Reddit ! Tweet This Brush


23 Responses to Using the new FileReference Class in Flex to save and load without a server

Avatar

João FernandesNo Gravatar

June 5th, 2008 at 2:11 pm

Doesn’t seem to work with IE8 Beta + FP10.

Avatar

No Gravatar

June 5th, 2008 at 2:15 pm

Ya you are right, it works though if you compile it.

Avatar

No Gravatar

June 5th, 2008 at 2:30 pm

All right, I fixed it. Thanks

Avatar

Flex 4 (Gumbo) Using FileReference to Upload & Download without a Server | Flex & AIR

September 10th, 2008 at 7:43 am

[...] in other words you have access to files at runtime. Now I did an example back then but It had some problems with a bug in the Flash Player 10. Now you can only upload and save Text [...]

Avatar

pallzoltanNo Gravatar

November 18th, 2008 at 3:53 am

i get this error:
ReferenceError: Error #1069: Property http://www.adobe.com/2008/actionscript/Flash10/::...not found on flash.net.FileReference and there is no default value.
at LiveCycle/onSaveImage()[C:ColdFusion8wwwrootLiveCyclesrcLiveCycle.mxml:34]
at LiveCycle/___LiveCycle_Button1_click()[C:ColdFusion8wwwrootLiveCyclesrcLiveCycle.mxml:71]

Avatar

Joseph Dov KohanNo Gravatar

December 7th, 2008 at 2:34 am

Mmmm, don't work for me….'possibly undefined method save/load to a reference with static type flash.net:FileReference….

Avatar

ElisaNo Gravatar

December 18th, 2008 at 7:20 am

I have problem with undefined method save/load to a reference with static type flash.net:FileReference….,,too????

Avatar

Mohamed IbrahimNo Gravatar

December 20th, 2008 at 4:39 am

It doesn't compile. I'm using Flex 3.2 SDK, getting
Error: Call to a possibly undefined method load through a reference with static type Class.
FileReference.load();
^

Also, the swf's on this page didn't work. I'm using flash 10 on firefox, XP.

Let me know if you have any helpful hints.
Thanks…

Avatar

DennisNo Gravatar

January 20th, 2009 at 8:42 pm

Same errors as above, obviously something related to flash 10…anyone identify the issue?

Avatar

fuqnbastardNo Gravatar

February 14th, 2009 at 8:04 am

I don’t think this feature really works. You can compile that code with Flex 3.2, but no Flash Player 10 I found will actually play it back. Not the one with Flex 3.2, not the firefox or internet explorer player, not the standalone debug version. Admittedly I only tried Windows.

They all fail, because they don’t know the FileReference:load() property.

Too bad.

Avatar

bigbearNo Gravatar

March 11th, 2009 at 9:57 am

The code works flawlessly.
Remember to compile it with Gumbo (SDK 4) and not the classical SDK 3.2.
You'll also need Flash Player 10 of course.

Avatar

FrankNo Gravatar

April 13th, 2009 at 6:53 am

No need to use Gumbo.

Only set the required flash player version at project properties to 10.0.0.

Avatar

StickboyNo Gravatar

April 17th, 2009 at 3:29 am

Well said Frank, you just need to change the Flex Compile in the project properties to 10.0.00

Avatar

kamrulNo Gravatar

April 19th, 2009 at 12:33 pm

i am trying to load image reference your code. but it shows some error '1061: Call to a possibly undefined method load through a reference with static type flash.net:FileReference.” . pls tell me that solution. pls someone help me what is the succeed procedure.

Avatar

Ady LevyNo Gravatar

June 7th, 2009 at 9:31 pm

check out : http://www.adylevy.com/index.php/2009/06/07/clien... for a source code for image manipulation on the client side.

Avatar

GilbertNo Gravatar

July 3rd, 2009 at 4:10 pm

Do you know how to use it to load a FLV or MP4 file?

Avatar

KarlNo Gravatar

July 20th, 2009 at 4:43 pm

Your example is not working. IE 7 Flash 10

Avatar

Fabricio C ZuardiNo Gravatar

August 16th, 2009 at 12:29 am

Doesnt work with Firefix 3.5 + FP 10,0,22,87

Avatar

FranckNo Gravatar

August 28th, 2009 at 2:31 pm

Doesn’t work with Chrome 2.0.172.43 (Latest now) and Flash player 10,0,32,18 (Latest now)…

Avatar

Ramian DNo Gravatar

October 2nd, 2009 at 2:39 pm

come on guys, works like a charm.. just listen to brothers Frank & Stickboy and compile for player 10.

Avatar

KaranNo Gravatar

October 9th, 2009 at 4:13 am

Even i got the same error message. Just follow the below link

http://opensource.adobe.com/wiki/display/flexsdk/Targeting+Flash+Player+10

It works for me

Avatar

moritzNo Gravatar

November 12th, 2009 at 10:52 am

Just spend some frustrating hours with that….
The Image-Sample provided here are not running for me (10,0,32,18).
Debug-Player throws an error related to missind load() method.

Compiled with Flex 3, 3.4.0.9271 FileReference works fine. I moved the Project to Flex 4 and compiled it with the included sdk 3.4.1.
Thats where the error is appearing in my case.
So now I use Flex 4 with sdk 3.4.0.9271 and it is working fine again.
So my conclusion:
Flex3 or 4 with sdk 3.4.0.9271 OK
Flex3 or 4 with sdk 3.4.1 ERROR
Flex4 with sdk4 NOT TESTED

Avatar

JangearseNo Gravatar

March 7th, 2010 at 7:46 am

Thanks for writing, I very much liked

Comment Form