1 Reply Latest reply on Mar 11, 2010 6:32 AM by Karl_Sigiscar_1971

    File upload withFileReference is always empty

    hannes4711

      Hi!

       

      I'm trying to realise a file upload since two days.

      I have a perl script wich takes care of saving the files on server side.

      This works very well with a html form.

       

      Till now I tried a few examples for using FileReference.upload.

       

      The problem is always the same. The parameters "name" and "filename" are always empty.

       

      Two of the examples:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="initApp()">
      <mx:Script>
      <![CDATA[
         import mx.controls.Alert;
      import mx.utils.ObjectUtil;
      import flash.events.*;
         import flash.net.FileReference;
         import flash.net.URLRequest;
      
      
         private var fileRef:FileReference;
      
              private function initApp():void {            
                  fileRef = new FileReference();
                  fileRef.addEventListener(Event.CANCEL, traceEvent);
                  fileRef.addEventListener(Event.COMPLETE, completeEvent);
                  fileRef.addEventListener(Event.SELECT, selectEvent);
                  fileRef.addEventListener(IOErrorEvent.IO_ERROR, traceEvent);
                  fileRef.addEventListener(Event.OPEN, traceEvent);
                  fileRef.addEventListener(ProgressEvent.PROGRESS, progressEvent);
                  fileRef.addEventListener(SecurityErrorEvent.SECURITY_ERROR, traceEvent);
              }
      
      private function traceEvent(event:Event):void {
      var tmp:String = "================================\n";
      ta.text += tmp + event.type + " event:" + mx.utils.ObjectUtil.toString(event) + "\n" ;
      ta.verticalScrollPosition += 20;
      }
      
      private function ioErrorEvent(event:IOErrorEvent):void{
      Alert.show("IOError:" + event.text);
      traceEvent(event);
      }
      
      private function selectEvent(event:Event):void{
      btn_upload.enabled = true;
      traceEvent(event);
      filename.text = fileRef.name;
      progressBar.setProgress(0, 100);
      progressBar.label = "Loading 0%";
      }
      
      private function progressEvent(event:ProgressEvent):void {
      progressBar.setProgress(event.bytesLoaded, event.bytesTotal);
      traceEvent(event);
      }
      
      private function completeEvent(event:Event):void {
      progressBar.label = "Complete.";
      filename.text += " uploaded";
      traceEvent(event);
      btn_upload.enabled = false;
      btn_cancel.enabled = false;
      }
      
      private function uploadFile(endpoint:String):void {
      var param:String = "author=" + ti_author.text + "filename=" + "putty.exe";
      var req:URLRequest = new URLRequest(endpoint);
      req.method = URLRequestMethod.POST;
      //Alert.show(ObjectUtil.toString(fileRef));
      
      fileRef.upload(req, param, false);
      log.text = ObjectUtil.toString(req.data); 
      progressBar.label = "Uploading...";
      btn_cancel.enabled = true;
      }
      
      ]]>
      </mx:Script>
      
      <mx:Panel title="Flex 2 File Uploading Demo" width="100%" height="100%" >
      <mx:Form>
      
      <mx:FormItem label="Upload URL:">
      <mx:TextInput id="uploadURL" width="100%" text="http://192.168.0.216/bugzilla/upload.cgi" enabled="true"  />
      </mx:FormItem>
      
      <mx:FormItem label="Selected File:">
         <mx:Label id="filename"/>
      </mx:FormItem>
      
      <mx:FormItem label="Upload By:">
      <mx:TextInput id="ti_author" text="Author" />
      </mx:FormItem>
      
      <mx:FormItem direction="horizontal" width="100%">
      <mx:Button width="80" label="Browse" click="fileRef.browse()" />
      <mx:Button width="80" label="Upload" id="btn_upload" enabled="false" click="uploadFile(uploadURL.text)" />
      <mx:Button width="80" label="Cancel" id="btn_cancel" enabled="false" click="fileRef.cancel()" />
      </mx:FormItem>
      
      <mx:HRule width="100%" tabEnabled="false"/>
      
      <mx:FormItem label="Progress:">
      <mx:ProgressBar id="progressBar" mode="manual" />
      </mx:FormItem>
      
      <mx:FormItem label="Events:">
      <mx:TextArea id="ta" width="350" height="200" />
      </mx:FormItem>
      
      <mx:FormItem label="Log:">
      <mx:TextArea id="log" width="350" height="200" />
      </mx:FormItem>
      
      </mx:Form>
      
      </mx:Panel>
      </mx:Application>
      
      

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <!-- http://blog.flexexamples.com/2007/10/30/using-the-urlvariables-and-filereference-classes-to-pass-data-from-flex-to-a-server-side-script/ -->
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              layout="vertical"
              verticalAlign="middle"
              backgroundColor="white"
              creationComplete="init();">
      
          <mx:Script>
              <![CDATA[
                  import flash.net.FileReference;
                  import flash.net.URLRequestMethod;
                  import mx.controls.Alert;
                  import mx.utils.StringUtil;
      
                  private var fileRef:FileReference;
                  private var urlVars:URLVariables;
                  private var urlReq:URLRequest;
                  private var startTimer:Number;
                  private var timer:Timer;
      
                  private function init():void {
                      fileRef = new FileReference();
                      fileRef.addEventListener(Event.SELECT, fileRef_select);
                      fileRef.addEventListener(Event.COMPLETE, fileRef_complete);
                      fileRef.addEventListener(IOErrorEvent.IO_ERROR, fileRef_ioError);
      
                      urlVars = new URLVariables();
                      urlVars.userID = 94103;
                      urlVars.fpVersion = flash.system.Capabilities.version;
      
                      urlReq = new URLRequest();
                      urlReq.method = URLRequestMethod.POST;
                      urlReq.data = urlVars;
                      urlReq.url = "http://192.168.0.216/bugzilla/upload.cgi";
      
                      timer = new Timer(100);
                      timer.addEventListener(TimerEvent.TIMER, onTimer);
                  }
      
                  private function onTimer(evt:TimerEvent):void {
                      lbl.text = String(getTimer() - startTimer) + " ms";
                  }
      
                  private function start():void {
                      fileRef.browse();
                  }
      
                  private function fileRef_select(evt:Event):void {
                      fileRef.upload(urlReq);
                      startTimer = getTimer();
                      timer.start();
                  }
      
                  private function fileRef_complete(evt:Event):void {
                      Alert.show(evt.toString(), evt.type);
                      timer.stop();
                  }
      
                  private function fileRef_ioError(evt:IOErrorEvent):void {
                      Alert.show(evt.text, evt.type);
                      timer.stop();
                  }
              ]]>
          </mx:Script>
      
          <mx:Button label="upload" click="start();" />
          <mx:Label id="lbl" />
      
      </mx:Application>
       
      
      

       

       

      In the last example I can at least read the urlVars in my perl script.

      But the file is still not moving...

       

       

      Hope someone can help me.

      Thx!