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

10 Sep
2008
Delicious

So in Flash Player 9, You couldn’t upload Files/save the files and have some sort of interaction with it without sending it to Server side scripts. Now, for example in Flash Player 10, a user can upload his/her word document and then be able to save it to his computer after he/she is done editing it without you having to store it on the server.

Another example would be working with Pixel Bender and interacting with the file that the user uploaded. You can now apply filters without ever having to send it to the server.

So 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 files (*.txt). However, the only problem that I could not find a solution for is that you can not change the file name. You have to accept the name I have set otherwise it will save without an extension.

Also, Alot of people have been getting this error
Error : 2174 Only one download, upload, load or save operation can be active at a time on each FileReference.

To Fix this Error, you need to Instantiate a new FileReference Object on upload and download, look at the source I have provided.

Remember You need Flash Player 10 for this to work, Upload a Text File, Type something in the Pad and save it. If you have any questions make sure to visit the Forums, http://vadexFX.com and ask them.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="library:adobe/flex/halo"
xmlns="http://ns.adobe.com/mxml/2009"
xmlns:ns="library:adobe/flex/gumbo" xmlns:local="*" 
backgroundColor="0xFFFFFF">
<Script>
<![CDATA[
        private var fileReference:FileReference = 
                        new FileReference();
 
        private function onSave():void
        {
   //Instantiate on downloading otherwise you will get an error
   fileReference = new FileReference();
   fileReference.save(myTextArea.text,"myExample.txt");
 
        }
        private function onLoad():void
        {
  //Instantiate on loading
 fileReference = new FileReference();
   //create the filter which will be just uploading the txt
   var myFilter:FileFilter = new FileFilter("Text","*.txt");
   fileReference.browse([myFilter]);
   fileReference.addEventListener(Event.SELECT,onFileSelect);
  fileReference.addEventListener(Event.COMPLETE,onFileComplete);
 
        }
        private function onFileSelect(event:Event):void
        {
              fileReference.load();
        }
        private function onFileComplete(event:Event):void
        { 
 
      myTextArea.text = 
    fileReference.data.readUTFBytes(fileReference.data.length);
 
        }
]]>    	
</Script>
 
   <mx:Panel id="myPanel" width="500" height="500">
    <ns:TextArea width="450" height="450" id="myTextArea"/>
   <mx:ControlBar>
   	<mx:Button label="Save" click="onSave()"/>
   	<mx:Button label="Load" click="onLoad()"/>
   </mx:ControlBar>
   </mx:Panel>
</mx:Application>
Incoming Search Terms :flex 4 file upload , flex 4 filereference , flex 4 upload file , flex 4 upload , only one download upload load or save operation can be active at a time on each filereference , filereference flex 4 , flex 4 download file , flex filereference download , flex4 filereference , flex download file from server

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


5 Responses to Flex 4 (Gumbo) Using FileReference to Upload & Download without a Server

Avatar

MarkNo Gravatar

October 19th, 2008 at 10:42 pm

Great to see these new features in FP 10.

I uploaded a text file and then saved it back. Unfortunately it converted all my windows line breaks into unix-style ones…

Avatar

flexpeopleNo Gravatar

February 4th, 2009 at 2:27 am

its cool!
thanks for sharing..
but, can u make a progress bar during upload process?
it can be really cool..
many examples are for upload to the server.
i dont want it like that.
can u make it?

Avatar

Orlando LeiteNo Gravatar

April 27th, 2009 at 2:39 am

Man! Good tuto!

But it's not a upload neither download. It's load and save, don't miss.

thx

Avatar

JoeNo Gravatar

May 13th, 2009 at 8:53 am

I was looking for fileRef.upload(phpUrlRequest, "photo");

been getting always an IOError right after that…

Avatar

MattNo Gravatar

June 10th, 2009 at 2:58 pm

absolutely awesome.

Thanks for the great example!!!

Comment Form