Uploading files in Flex using the FileReference class

The following example shows how you can use the FileReference class’s browse() method to allow users to select and upload a single file to a Web server.

If you want to allow users to upload multiple files at once, you would use the FileReferenceList class instead of FileReference.

<? xml version="1.0" encoding="utf-8" ?>
<!--  http://blog.flexexamples.com/2007/09/21/uploading-files-in-flex-using-the-filereference-class/  -->
< mx:Application  xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout ="vertical"
        verticalAlign ="middle"
        backgroundColor ="white"
        creationComplete ="init();" >

     < mx:Script >
         <![CDATA[
            private var fileRef:FileReference;

            private const FILE_UPLOAD_URL:String = "http://www.YOUR-WEBSITE-HERE.com/fileref/uploader.cfm";

            private function init():void {
                fileRef = new FileReference();
                fileRef.addEventListener(Event.SELECT, fileRef_select);
                fileRef.addEventListener(ProgressEvent.PROGRESS, fileRef_progress);
                fileRef.addEventListener(Event.COMPLETE, fileRef_complete);
            }

            private function browseAndUpload():void {
                fileRef.browse();
                message.text = "";
            }

            private function fileRef_select(evt:Event):void {
                try {
                    message.text = "size (bytes): " + numberFormatter.format(fileRef.size);
                    fileRef.upload(new URLRequest(FILE_UPLOAD_URL));
                } catch (err:Error) {
                    message.text = "ERROR: zero-byte file";
                }
            }

            private function fileRef_progress(evt:ProgressEvent):void {
                progressBar.visible = true;
            }

            private function fileRef_complete(evt:Event):void {
                message.text += " (complete)";
                progressBar.visible = false;
            }
         ]]>
     </ mx:Script >

     < mx:NumberFormatter  id ="numberFormatter"   />

     < mx:Button  label ="Upload file"
            click ="browseAndUpload();"   />
     < mx:Label  id ="message"   />
     < mx:ProgressBar  id ="progressBar"
            indeterminate ="true"
            visible ="false"   />

</ mx:Application >