9/03/2011

Loading local file to Flash using FileReference

Been busy... so here's a quick post.
There are plenty of tutorials for uploading a file to a server. Here is one that lets you load a file(image) directly into Flash. Requires Flash Player 10.

The FileReference class allows you to access files on your computer and server. It is commonly used to download and upload files, but it can also be used to load a local file directly into your flash app. One might use it to allow users to upload their own pictures or to load a game save file. Best thing about FileReference is that it can open a file-browsing dialog box to let you select a file. To do that: import flash.net.FileReference; var fileR:FileReference = new FileReference(); var imageFilter = new FileFilter("Images", "*.jpg;*.jpeg;*.gif;*.png"); fileR.browse([imageFilter]); The above code opens the file-browsing dialog box with a filter for image files. The browse method takes an array of FileFilter objects as its filter. To browse without any filter, just don't pass any parameters.

A FileFilter object has two parameters. The first one determines what shows up in the File Type field. The second one determines the file extensions that would be shown.

Now we can do something with file selected with the following event handlers: fileR.addEventListener(Event.CANCEL, cancelHandler); fileR.addEventListener(Event.SELECT, selectHandler); fileR.addEventListener(ProgressEvent.PROGRESS, progressHandler); fileR.addEventListener(Event.COMPLETE, completeHandler); function selectHandler(e:Event):void{ // file selected trace("selectHandler: "+fileR.name); fileR.load(); // load it } function cancelHandler(e:Event):void { // file select canceled trace("cancelHandler"); } function progressHandler(e:ProgressEvent):void{ // progress event trace("progressHandler: loaded="+e.bytesLoaded+" total="+e.bytesTotal); } function completeHandler(e:Event):void{ // file loaded trace("completeHandler: " + fileR.name); var ba:ByteArray=fileR.data; // now you have your file loaded as a ByteArray } After a file is selected, the selectHandler simply loads the file by calling load(). On load complete the loaded file's data can be accessed via its data property. It is in the form of a ByteArray. Reading that ByteArray would be an entirely separate tutorial, and you can find numerous tutorials online.

Here is an example that loads a local image file.
And its code: import flash.display.Bitmap; import flash.display.Loader; import fl.controls.Button; import flash.net.FileReference; import flash.net.FileFilter; import flash.events.Event; import flash.events.ProgressEvent; import flash.events.MouseEvent; import flash.utils.ByteArray; // initializing FileReference var imageFilter=new FileFilter("Images", "*.jpg;*.jpeg;*.gif;*.png"); var fileR:FileReference=new FileReference(); fileR.addEventListener(Event.CANCEL, cancelHandler); fileR.addEventListener(Event.SELECT, selectHandler); fileR.addEventListener(ProgressEvent.PROGRESS, progressHandler); fileR.addEventListener(Event.COMPLETE, completeHandler); // creating button using Flash component var pickbutton:Button=new Button(); pickbutton.x=pickbutton.y=10; pickbutton.label="Select Image"; pickbutton.addEventListener(MouseEvent.CLICK,selectImage); addChild(pickbutton); function selectImage(e:MouseEvent):void{ // click button fileR.browse([imageFilter]); // browse files } function selectHandler(e:Event):void{ // file selected trace("selectHandler: "+fileR.name); fileR.load(); // load file } function cancelHandler(e:Event):void { // cancel select trace("cancelHandler"); } function progressHandler(e:ProgressEvent):void { // progress event trace("progressHandler: loaded="+e.bytesLoaded+" total="+e.bytesTotal); } function completeHandler(e:Event):void { // file loaded trace("completeHandler: " + fileR.name); var ba:ByteArray=fileR.data; // get data var loader:Loader=new Loader(); loader.contentLoaderInfo.addEventListener(Event.COMPLETE,loaded); loader.loadBytes(ba); // load with Loader } function loaded(e:Event):void{ // bitmap loaded while(numChildren>1){ // remove any previous bitmaps on stage removeChildAt(0); } var bm:Bitmap = e.currentTarget.loader.content as Bitmap; // resize bitmap if larger than stage if(bm.width>stage.stageWidth||bm.height>stage.stageHeight){ var xscale:Number=stage.stageWidth/bm.width; var yscale:Number=stage.stageHeight/bm.height; if(xscale<yscale){ bm.scaleX=bm.scaleY=xscale; }else{ bm.scaleX=bm.scaleY=yscale; } } // center bitmap bm.x=Math.abs(bm.width-stage.stageWidth)/2; bm.y=Math.abs(bm.height-stage.stageHeight)/2; // add to bottom addChildAt(bm,0); }

11 comments:

  1. Thanks for the tutorial!
    Quick question:
    how would i set up the code to display the image inside a container on any given frame.
    In a project I want to have a file select on one frame and display it in a second frame.
    Thanks!

    ReplyDelete
  2. If I understand your question...
    Just add it to your container in the loaded function.
    container.addChild(bm);

    ReplyDelete
  3. Good tutorial.

    I want to use that "filereference included sample" without browse option. instead of browse, I want to use it for a local file, example ("./files/19836.jpg"). I changed lots of things, but I did not suceed.
    please help me.

    ReplyDelete
  4. Is this thread alive?
    I'm having trouble loading bigger than 400mb files,
    I get a system out memory, is there a way to stream the chunks rather than try to put them all together in memory, I want it for the flash player not desktop, so I don;t think I can use filestream

    ReplyDelete
  5. Can anyone tell where to write the above cod... Please its urgent.... pls

    ReplyDelete
    Replies
    1. you can do an action layer within the time line.. or you could do a Main.as external file but you would have to ad the package script ect.

      Delete
  6. Question how can I make so that the user can drag on drop the image in different sports on the stage? I have it so it is scaled mush smaller and I tried the script for drag and drop; but it comes up with an undefined property bm... what is the image renamed too once loaded on stage?

    ReplyDelete
  7. // resize bitmap if larger than stage
    if(bm.width>stage.stageWidth||bm.height>stage.stageHeight)...
    very nice solution, borrowed it. thank you!

    ReplyDelete
  8. Hi, thanks for the excellent article. I have one question here, is this method possible to browse and loading the .swf file instead of image...if yes how??

    thanks

    ReplyDelete
    Replies
    1. Yes, I just tried it. Just change imageFilter = new FileFilter("SWF Files","*.swf");

      and then on loaded, e.currentTarget.loader.content is your swf.

      Delete
    2. Thank you...you just save me a lot...

      Delete