How do you upload a photo in Flex 3?

Question

In Flex 3 how to upload a photo ssing Browse and Upload option?

In Flex 4 there is an option like:

<net:FileReference id="fileReference"
                       select="fileReference_select(event);"
                       complete="fileReference_complete(event);" />

But in Flex 3 there is no <net> tag.

EDIT:

This is my Button click handler code

protected function uploadProfileImage(event:MouseEvent):void
        {

            
            var fileRef:FileReference= new FileReference();
            browseButton.addEventListener(MouseEvent.CLICK, onButtonClick);
            
            function onButtonClick(e:MouseEvent):void {
                fileRef.browse([new FileFilter("Images", "*.jpg;*.gif;*.png")]);
                fileRef.addEventListener(Event.SELECT, onFileSelected);
                Alert.show("0")
            }
            
            function onFileSelected(e:Event):void {
                fileRef.addEventListener(Event.COMPLETE, onFileLoaded);
                //fileRef.load();
                Alert.show("1");
            }
            
            function onFileLoaded(e:Event):void {
                var loader:Loader = new Loader();
                loader.loadBytes(e.target.data);
                //addChild(loader);
                profileImage.data = loader.content;
                profileImage.width = loader.width;
                profileImage.height = loader.height;
                this.height = profileImage.height;
                this.width = profileImage.width;
                this.visible = true;
                Alert.show("2");

            }

Answer 1

There's no <net> tag in Flex 4 either. The net part in <net:FileReference... is an xml namespace. There are a bunch defined at the top of your application's MXML file. Here's a sample from a Flash-based Flex 4 app:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

The xmlns:s="library://ns.adobe.com/flex/spark" is just mapping all the Spark components to the s namespace which allows you to reference Spark components like Button in MXML like this:

<s:Button label="My Button"/>

In the case of Spark Adobe has provided a manifest file that maps the fully qualified Spark packages to the familiar MXML names (this question has an example of such a file). You can also map AS3 package names to an xml namespace.

FileReference is in the flash.net package. You can bind that package to the net namespace by adding the following to the root tag in your MXML file:

xmlns:net="flash.net.*"

Once you do that you can reference classes in the flash.net package in MXML by prefixing them with "net" ala <net:FileReference....

Of course, FileReference doesn't inherit UIComponent so you won't be able to add it directly to your application. So that's probably not what is happening in your case.

Without seeing more than what you've posted I suspect that the FileReference in your question is a custom component that has it's package bound to the net xmlns.

Can you post the complete MXML document that has the <net:FileReference... tag in it?

EDIT

Using the code you added, in your script block have this:

var fileRef:FileReference = new FileReference();

function onButtonClick(e:MouseEvent):void {
    fileRef.browse([new FileFilter("Images", "*.jpg;*.gif;*.png")]);
    fileRef.addEventListener(Event.SELECT, onFileSelected);
    fileRef.addEventListener(Event.CANCEL, onFileCanceled);
}

function onFileSelected(e:Event):void {
    fileRef.removeEventListener(Event.SELECT, onFileSelected);
    fileRef.removeEventListener(Event.CANCEL, onFileCanceled);

    fileRef.addEventListener(Event.COMPLETE, onFileLoaded);
    fileRef.load();
}

function onFileCanceled(e:Event):void {
    fileRef.removeEventListener(Event.SELECT, onFileSelected);
    fileRef.removeEventListener(Event.CANCEL, onFileCanceled);
}

function onFileLoaded(e:Event):void {
    fileRef.removeEventListener(Event.COMPLETE, onFileLoaded);
    var loader:Loader = new Loader();
    loader.loadBytes(e.target.data);
    profileImage.data = loader.content;
    profileImage.width = loader.width;
    profileImage.height = loader.height;
    profileImage.visible = true;
}

Then in your MXML have something like:

<mx:Button
    label="Click to Load Profile Image"
    click="onButtonClick(event)"/>

<mx:Image
    id="profileImage"
    visible="false"/>

EDIT 2

If you are having problems with calling load() on FileReference make sure you are targeting the correct Flash Player. This answer explains how to do that in Flash Builder. IIRC, Flex 3 projects target Flash Player 9 be default.