Search Flex Components Free

Custom Search

July 6, 2009

uploading an image into flash without server side script using flash player 10

The FileReference class in flash player 10 has a new method : FileReference.load() which provides the power of uploading the image, text file etc into flash player without any server side script.

Before proceeding with FileReference.load() method, we need to call FileReference.browse()method so that user can select a file to load a selected file into flash player. Once the file get loaded into flash player you can access the loaded data by using a property of FileReference.data.
The data loaded at FileReference.data property is commonly a type of ByteArray. we want to convert it to bitmap. so the trick is to use the loader class; loader.loadBytes() method. The method converts the ByteArray to a loader image object. once it completes loading we can add the loader object to display list to display the image. so here we go;

Note: the example has been created in flash cs4 and targets flash player 10;

settings:

1) create a blank flash document in flash cs4.

2) create a folder named with “flexScript” and copy and paste the below code to a new actionscript file and save the file into “flexScript” folder with the name “uploadImage”.

3) put a button component on the stage and put a instance name as “upload_Image”;

4) set the document class as “flexScript.uploadImage”; and run the application and check the magic;

  1. package flexScript {  
  2.     import flash.display.Sprite;  
  3.     import flash.events.MouseEvent;  
  4.     import flash.net.*;  
  5.     import flash.display.*;  
  6.     import flash.events.*;  
  7.     import flash.utils.ByteArray;  
  8.   
  9.     public class uploadImage extends Sprite {  
  10.         private var jagFileRefSave:FileReference = new FileReference();  
  11.         private var loader:Loader = new Loader();  
  12.         private var imagesFilter:FileFilter = new FileFilter("Images""*.jpg;*.gif;*.png");  
  13.   
  14.     public function uploadImage(){  
  15.         super();  
  16.         upload_Image.addEventListener(MouseEvent.CLICK,onClickSave);  
  17.   
  18.     }  
  19.     private function onClickSave(e:MouseEvent):void{      
  20.         jagFileRefSave.browse([imagesFilter]);  
  21.         jagFileRefSave.addEventListener(Event.SELECT, selectedFile);  
  22.     }          
  23.     private function selectedFile(e:Event):void{  
  24.         jagFileRefSave.load();  
  25.         jagFileRefSave.addEventListener(Event.COMPLETE, loaded);  
  26.     }  
  27.     private function loaded(e:Event):void{  
  28.         var rawBytes:ByteArray = jagFileRefSave.data;  
  29.         loader.contentLoaderInfo.addEventListener(Event.COMPLETE, getBitmapData)  
  30.         loader.loadBytes(rawBytes);  
  31.     }  
  32.     private function getBitmapData(e:Event):void{  
  33.         addChild(loader);  
  34.     }  
  35.   
  36.     }  
  37. }  

Related Flex Tutorials