12
Jan
09

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

According to my last post, Flash Player 10 has updated FileReference class with some new featured methods. My last post explaining how some one can download an image from flash to user file system without using any server side scripting. In this post i am going to show you another power of flash player 10, that is uploading an image into flash player without using any server side script.

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;


package flexScript {
    import flash.display.Sprite;
    import flash.events.MouseEvent;
    import flash.net.*;
    import flash.display.*;
    import flash.events.*;
    import flash.utils.ByteArray;

    public class uploadImage extends Sprite {
        private var jagFileRefSave:FileReference = new FileReference();
        private var loader:Loader = new Loader();
        private var imagesFilter:FileFilter = new FileFilter("Images", "*.jpg;*.gif;*.png");

    public function uploadImage(){
        super();
        upload_Image.addEventListener(MouseEvent.CLICK,onClickSave);

    }
    private function onClickSave(e:MouseEvent):void{    
        jagFileRefSave.browse([imagesFilter]);
        jagFileRefSave.addEventListener(Event.SELECT, selectedFile);
    }        
    private function selectedFile(e:Event):void{
        jagFileRefSave.load();
        jagFileRefSave.addEventListener(Event.COMPLETE, loaded);
    }
    private function loaded(e:Event):void{
        var rawBytes:ByteArray = jagFileRefSave.data;
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, getBitmapData)
        loader.loadBytes(rawBytes);
    }
    private function getBitmapData(e:Event):void{
        addChild(loader);
    }

    }
}


25 Responses to “Uploading an image into flash without server side script using flash player 10”


  1. 1 Atif Zahid
    February 12, 2009 at 5:50 pm

    Hi,

    I tried following thsio example and followed all the steps. But when i play the movie and press the button, nothign happens. Personally (since i am new to flash and cs4), i think my classpath might not be set properly or something. I created the flexScript folder on desktop and flash is installed in Program Files (the usual location). Could you please tell em what i am missing to get this working.

    Regards

    Atif

    • 2 Shrikant Patil
      February 18, 2009 at 1:01 pm

      Hi, Atif,
      try to create a folder on desktop named as “uploadExample” and inside that folder create you flash file. After that create a folder into same folder named “flexScript” and put that class file into that. main thing is you need to set that class name as main class of the application in you flash file. you do that by following steps,
      1) open your flash file and open properties panel.
      2) click on main class and choose the class files which resides inside flexScript folder and run the application.

  2. 3 richard coupal
    April 8, 2009 at 12:32 pm

    hi! i have a little problem, when i run the application the button open and close automatic.
    what can i do?

    thanks

    • 4 Shrikant Patil
      April 9, 2009 at 6:35 am

      For this script to work you must have flash player 10 plugin and activeX players installed to your IE or firefox.

  3. 5 christian
    June 15, 2009 at 10:21 am

    Hi how can i make it upload the image to a movie clip container so that i can manipulate the file? This is 100% working for me, how can i tweak the actionscript to make it load the image to my movieclip?

    great job, all i need is to upload the image and im done with my project >.<. Your a life saver man.

  4. 6 christian
    June 15, 2009 at 10:34 am

    its working on blank document but when i tried to link the as file to my fla file (the one with as3 codes at the timeline), it generates tons of error >.<

    Is this possible to fla file only without .as document? I really appreciate your help since this is all thats left that i need to do to finish my flash project. thanks

  5. 7 christian
    June 16, 2009 at 3:20 am

    never mind i fix my problems and tried to associate my codes to as file =D
    just add movieclipname.addChild(loader); if you want to load the image to a movieclip container.

    Thanks man ur a life saver!!

  6. 9 Vinay
    June 17, 2009 at 4:30 am

    Hi…!

    I am Vinay, I want to upload image without serverside script. I am facing lot of problems. i am using text file (notepad) for uploading image in flash 8. If you have anything regarding my query plz replay me soon.

    Thanks..!

    • 10 Shrikant Patil
      June 17, 2009 at 5:32 am

      If your are using flash 8 then you need to use any of other technologies like PHP, ASP etc to upload the image into flash at run time. The method i explained above is supported only by flash player 10 and above

  7. 11 christian
    July 1, 2009 at 6:17 am

    How do you load .bmp files? it seems like adding *.bmp; to new FileFilter will not work. It gives me a “Error #2044: Unhandled IOErrorEvent:. text=Error #2124: Loaded file is an unknown type.” everytime i try to load a .bmp file.

    Thanks.

  8. 12 Cristinec6
    July 13, 2009 at 11:49 pm

    I have created a flash file for one of our radio stations here in palm springs. I am not an expert in Flash but have managed to link a text file to our now playing streaming, in which the artist and song title pops up every time a song is loaded on air. Is it possible to link the artist name to a picture and have it come up when the artist name fires? You know, kind of float their face by at the same time.

    See http://www.927kkuu.com to see what i am talking about.

    What would i need to do to reference artist albums to song. I know this is possible but i am a little stuck as to where i start.

    • 13 Shrikant Patil
      July 14, 2009 at 5:05 am

      Yes you can access the artist, song title etc of a mp3 file. Try to google for access the “ID3″ tags of a mp3 file in flash. you will get your way.

  9. 14 James
    July 17, 2009 at 4:20 pm

    public function uploadImage(){
    super();
    upload_Image.addEventListener(MouseEvent.CLICK,onClickSave);
    }

    If people are experiencing issues with the code, it may be due to these lines.
    upload_Image is not defined in the classes and so Flash throws me a compile error, instead try this for the constructor:

    public function uploadImage(upload_Image:Button){
    super();
    upload_Image.addEventListener(MouseEvent.CLICK,onClickSave);
    }

    Then make a button in your test fla, name the instance upload_Image and type in this code:

    import flexScript.uploadImage;
    var imgUp:uploadImage = new uploadImage(upload_Image);

    Hth anyone that may have been having issues.

    James

    • 15 Tim
      August 31, 2010 at 8:09 pm

      Don’t forget to import the fl.controls class into your “uploadImage.as”-file. If not you will get an error-message, because the “uploadImage” class doesn’t know the “Button” type.

      import fl.controls.*;

  10. November 10, 2009 at 6:38 pm

    thanks.. wonderful post.. and clear explanation..

  11. 17 gman
    January 6, 2010 at 9:40 pm

    hey if you could give me a link to this actionscript file it isnt working right could be to the copy and paste issue and i am new to actionscript 3 i know 2 so much better i am getting a million errors

    • 18 Shrikant Patil
      January 7, 2010 at 4:46 am

      HI gman,
      Few things to consider;
      * The script work for flash player ver.10 and above
      * use flash cs4 to compile the above code.

  12. 19 gman
    January 30, 2010 at 4:56 pm

    again there is so much mix up in the top code and ive been working with flash since 1989 macromedia this code is not working i am using 4 and ver1.0 and its not doing anything not even a error cant you just make a downloadable as file ive created a jibjab site and i just cant see this working without server side php or give a example page

    • 20 Shrikant Patil
      February 1, 2010 at 6:55 am

      Hi,

      The recommended versions for the code is Flash cs3 or flash cs4
      and As version is AS 3.0
      Flash Player Version is > 10.

      Please check you all above versions with your code.

  13. 21 visions
    March 23, 2010 at 1:30 am

    Hi, I need to have multiple upload buttons, so people can upload more than 1 image. Any advice on how to modify this to acheive that? I have the single image upload working.

  14. 22 William
    January 24, 2011 at 7:03 am

    Hi, how can i trace for the image path??

  15. 23 gman
    March 10, 2011 at 9:51 pm

    hey guy i got this to upload a image fine now how can i drop that image into a img_mc so i can do some stuff like jibjabs setup or can u is this possible!!!!!!

  16. 24 imageProp_mc.uploadedPic_mc
    April 16, 2011 at 9:56 am

    Thanksssssssssssssssssssssssssssssssssssss

  17. July 21, 2011 at 11:16 pm

    This worked great for me, thanks a lot.


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 )

Connecting to %s


Follow

Get every new post delivered to your Inbox.