Skip to content
January 12, 2009 / Shrikant Patil

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);
    }

    }
}

Advertisements

26 Comments

Leave a Comment
  1. Atif Zahid / Feb 12 2009 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

    • Shrikant Patil / Feb 18 2009 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. richard coupal / Apr 8 2009 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

    • Shrikant Patil / Apr 9 2009 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. christian / Jun 15 2009 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. christian / Jun 15 2009 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. christian / Jun 16 2009 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!!

    • TheFirstLove / Aug 25 2011 11:30 am

      how did u do it.. i cant seem to make it work..

  6. Vinay / Jun 17 2009 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..!

    • Shrikant Patil / Jun 17 2009 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. christian / Jul 1 2009 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. Cristinec6 / Jul 13 2009 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.

    • Shrikant Patil / Jul 14 2009 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. James / Jul 17 2009 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

    • Tim / Aug 31 2010 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. Quakeboy / Nov 10 2009 6:38 pm

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

  11. gman / Jan 6 2010 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

    • Shrikant Patil / Jan 7 2010 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. gman / Jan 30 2010 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

    • Shrikant Patil / Feb 1 2010 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. visions / Mar 23 2010 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. William / Jan 24 2011 7:03 am

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

  15. gman / Mar 10 2011 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. imageProp_mc.uploadedPic_mc / Apr 16 2011 9:56 am

    Thanksssssssssssssssssssssssssssssssssssss

  17. Martin Fasterholdt / Jul 21 2011 11:16 pm

    This worked great for me, thanks a lot.

  18. joanatyu / Mar 4 2012 5:12 am

    I have an upload working, the problem is it can only upload 1 image. i want to make it upload many image

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: