FileReference in Flash Player 10

In previous versions of Flash Player, when a user selects a file from his machine for uploading, developers had to send the file to the server and get it back to access the data in the file selected. In Flash Player 10, developers can access the File data selected by the user without a round trip to the server. This is an amazing enhancement. Adobe Rocks !!!

You can allow users to select a file and do all manipulations on the client (Flash Player) and let your user save it back to his system instead of sending the file to the server and processing it on the server.🙂

One more change to the FileReference class in Flash Player 10. The FileReference object methods browse, download, and save and the FileReferenceList.browse method will succeed only when called from within an ActionScript function that is the result of a user-initiated action. Find more details at this URL http://www.adobe.com/devnet/flashplayer/articles/fplayer10_uia_requirements.html?devcon=f2

I created a very simple sample which shows the changes mentioned above.

First you will have to configure your Flex Builder to target to Flash Player 10 and also use the new player APIs. This is very simple. Please follow the steps in this URL http://opensource.adobe.com/wiki/display/flexsdk/Targeting+Flash+Player+10+Beta

First lets see how we can load and modify the file on the client.

Loading and saving file

First invoke the FileReference.browse() function and let the user select the file. Once the file selected event is invoked you should invoke FileReference.load() function to load the file into memory. Once loaded, it’s all yours🙂 in the sample I am allowing user to select a file and then loading the same and displaying it in a TextArea.

Download the source code from here http://sujitreddy.g.googlepages.com/FileRefSample.mxml

Try sample at this URL http://www.sujitreddyg.com/samples/filereferencesample/FileRefSample.html

Few functions in the source file are explained below.

Loading the file

In the function below, calling FileReference.browse() will pop up a window for user to select a file.

private function browseFile():void{

fileRef = new FileReference();

fileRef.addEventListener(Event.SELECT, onFileSelected);

……(more)

var textTypeFilter:FileFilter = new FileFilter(“Text Files (*.txt)”,”*.txt”);

try{

fileRef.browse([textTypeFilter]);

}catch(err:Error){logData(err.message);}

}

Function below will be invoked when the user selects the file. You can see that we are invoking the load() function and are waiting for the load to complete.

private function onFileSelected(event:Event):void{

fileRef.addEventListener(ProgressEvent.PROGRESS, onProgress);

fileRef.addEventListener(Event.COMPLETE, onComplete);

//this is where we load the file into memory

fileRef.load();

}

In the onComplete handler function, you can access the data using the FileReference object’s data property as shown in the source file attached.

Saving the file

In the sample we are displaying the data in the file in a TextArea. You can modify the data and then click on the save button. The save button will invoke the function below.

public function saveFile():void{

saveFileRef = new FileReference();

saveFileRef.addEventListener(Event.SELECT, onSaveFileSelected);

//this will throw a window for user to select the location

//and file name to save. Second argument is the default name

saveFileRef.save(fileDataBox.text,fileRef.name);

}

That’s all you need to do🙂

Other change as mentioned above is that you can invoke the browse/upload and other methods as described in the URL above only on user generated events like button click. In the sample I tried invoking a function on creationComplete event to popup a file selection popup using the browse() function. You can see that the call fails as creationComplete is not a user invoked event.

The same function is invoked on click of a button and it works perfectly. Please check attached code.

13 Responses to FileReference in Flash Player 10

  1. Mike says:

    Hi,

    Is it possible to load the file, modify it and then upload the modified data?

    Thanks,
    Mike

  2. Sujit Reddy G says:

    Hi Mike,

    I did not try uploading the modified file to the server, but you can do it. Please try it and let me know if you have problems.

    Hope this helps.

  3. Foli says:

    Hi Mike.
    Sure it’s possible. I did it and all was fine.

    1) load a file.
    2) do somthing with your file.
    3) send it to server by: HttpRequest or RemoteObject, etc…

    Goodluck Dude😉
    Foli – Uktraine

  4. Ravi Gummadi says:

    Hi Sujit,

    Nice Post, But I always thought not allowing the browser(By Browser I mean, browser technologies like Applet, Flash etc) to manipulate the system files will seriously compromise client side security. How is flash platform handling this, when it opens its sandbox to modify client side content. I am very paranoid about this feature though.

    -Ravi

  5. Ravi Gummadi says:

    Typo in the first line
    *not allowing* -> allowing

  6. Hi Ravi,

    This is secure. Firstly Flash will not give access to the user file system with out user initiating the request (http://www.adobe.com/devnet/flashplayer/articles/fplayer10_uia_requirements.html?devcon=f2). Once the content is available, it is the data loaded in memory that can be modified and not the actual file. Only if the user allows to save it back the data is saved back on user system.

    Hope this helps.

  7. Grant says:

    I’m still VERY confused by these UIA restrictions. All I want to do is post some data to the server, get a response (including the ID of the new record I’ve added to my DB) and then do another request (in this case saving an image with the ID in the filename) back to the server. This worked fine until v10 – now we’re only allowed one call per user action (e.g. mouse click or key stroke). Insane!

  8. Sujith,

    Is it possible to create XML File from flex as FileRefence and to upload the same xml file using FileReference.upload() methode.

    Thanks,
    Ravi

  9. greg says:

    All well and good, but in Air the fileReference objects in fileReferenceList do not fire the complete event when doing fileList[i].load(). Adobe has not taken bug reports on this appropriately.

  10. Ravi says:

    Hi Sujith,

    I am new to Flex. Please let me know how to convert image to byteArray at flex side and send byteArray to Java side.

    On click of button using FileRefrence i am selecting the image at run time, but after this I am unable to proceed a head. As I am not able to know how to assign the selected image to Bitmap class and then generate byteArray of image.

    Your help would be greatly appreciated.

    Thanks,
    Ravi.

  11. cory says:

    This is highly restrictive for some use cases.

    We have a webcam page that sends periodic snapshots back to the server hosting the flash app whenever there is motion exceeding a threshold value.

    This is now prevented from working from within a Timer which is a complete deal killer.

    Does anybody have any workarounds?

  12. John TH says:

    Hi. I am extremely new to FB. In fact, I just downloaded the free trial of FB4 today.

    I wanted to get the source code for this example, but the link is broken. You say:

    Download the source code from here http://sujitreddy.g.googlepages.com/FileRefSample.mxml
    “,
    but, that link is broken.

    Do you have the correct link handy?

    Thanks,

    John

  13. Hi John,

    Looks like there is some problem with server. Please try downloading from here http://sujitreddyg.com/googlepages/FileRefSample.mxml

    Thank you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: