0 Replies Latest reply on Nov 15, 2010 8:27 AM by Handycam

    File upload in a Flex app?

    Handycam Level 1

      I am trying to put together an web app where the user uploads a file and that file is then displayed in a flex image control.

       

      Doing some Googling I found this and set it up.  This example uses a cfm file, so I tried instead using php, which I got from here.

       

      The basic web form from the second link above succesfully uploads my file, but not when called from the flex.  What am I doing wrong here?

       

      <?xml version="1.0" encoding="utf-8"?>
      <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" creationComplete="init()">
           
           <s:layout>
                <s:VerticalLayout />
           </s:layout>
           
           <fx:Declarations>
                <mx:NumberFormatter id="numberFormatter" />
           </fx:Declarations>
           <fx:Script>
                <![CDATA[
                     private var fileRef:FileReference;
                     private var imageName:String;
                     
                     private const FILE_UPLOAD_URL:String = "http://localhost/upload.php";
                     
                     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 = "file name is "+ fileRef.name;
                               imageName = fileRef.name;
                               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;
                          loadedImage.source = "http://localhost/uploads/"+imageName;
                     }
                ]]>
           </fx:Script>
           
           <mx:Button label="Upload file" click="browseAndUpload();" />
           <s:Label id="message" />
           <mx:ProgressBar id="progressBar" indeterminate="true" visible="false" />
           <mx:Image id="loadedImage" />
           
      </s:Application>