2 Replies Latest reply on Oct 22, 2007 1:56 AM by arshad_sg

    File upload issue

    arshad_sg
      Hi All

      I am trying to write a simple application for uploading a file using URLRequest and FileReference classes. Besides uploading the file, the application also passes few variables through URLRequet's data field. The application works fine on Windows using IE + Apache + Active Perl. However, on Linux with Firefox, the variables are not getting passed to the web server; the file gets uploaded though. Is there any thing special need to be done when using FileReference class with Linux and Firefox? I also tried Flex 3 beta 2 but to no avail. Any help to solve this issue is greatly appreciated.

      Following is the example mxml file and the server side Perl script to demonstrate this issue. Put the Perl script into the cgi-bin directory of Apache web server and SWF and HTML files in the htdocs directory. Upload a text file and then check the Apache error_log file to see what is received by the web server.

      TIA

      Arshad

      ------- Upload.mxml ----------
      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">

      <mx:Script>
      <![CDATA[
      import mx.events.*;
      import flash.net.*;
      import mx.controls.Alert;
      import mx.utils.ObjectUtil;
      import mx.utils.URLUtil;

      private var fileRef:FileReference;
      private var request:URLRequest;
      private var urlVars:URLVariables;

      private function initApp():void
      {

      }

      private function handleSelect(event:Event):void
      {
      urlVars = new URLVariables();
      urlVars.action = "testmgr";
      urlVars.op = "upload_test";
      request = new URLRequest(" http://"+ URLUtil.getServerNameWithPort(application.url)+"/cgi-bin/dump.pl");
      request.data = urlVars;
      request.method = URLRequestMethod.POST;

      fileRef.upload(request);
      }

      private function handleComplete(event:Event):void
      {
      txtMessage.text = "Upload completed successfully.";
      }


      private function onUploadFile():void
      {
      fileRef = new FileReference();
      fileRef.addEventListener(Event.SELECT, handleSelect);
      fileRef.addEventListener(Event.COMPLETE, handleComplete);
      fileRef.browse();
      }
      ]]>
      </mx:Script>

      <mx:Panel x="124" y="95" width="250" height="200" layout="absolute" title="Upload Files to Server">
      <mx:Button x="67" y="110" label="Upload a file" id="btnUploadFile" click="onUploadFile()" enabled="true"/>
      <mx:Text x="96" y="35" id="txtMessage"/>
      </mx:Panel>


      </mx:Application>

      -----------------------------------------------------

      -------------- dump.pl ---------------------------

      #!/usr/bin/perl

      use strict;
      use CGI;

      my $query = new CGI;

      my @names = $query->param;

      print $query->header('text/plain;');

      # Print all the parameters passed.
      foreach my $name (@names) {
      my $value = $query->param($name);
      print STDERR "name=$name\t\tvalue=$value\n";
      }

      my $fh = $query->upload("Filedata");
      my $script = "";

      if (defined $fh) {
      print STDERR 'You uploaded file: '.$query->param("Filename");
      while (<$fh>) {
      $script .= $_;
      }
      print STDERR "Script: $script";
      } else {
      print STDERR "No file uploaded";
      }

      ------------------------------------------------------

      ------------ Upload.html ------------------------
      <!-- saved from url=(0014)about:internet -->

      <html lang="en">

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <title>Upload File</title>

      <script src="AC_OETags.js" language="javascript"></script>

      <style>

      body { margin: 0px; overflow:hidden }

      </style>

      </head>



      <body scroll='no'>

      <script language="JavaScript" type="text/javascript">

      <!--

      AC_FL_RunContent(

      "src", "Upload",

      "width", "100%",

      "height", "100%",

      "align", "middle",

      "id", "main",

      "quality", "high",

      "bgcolor", "#869ca7",

      "name", "flexstore",

      "allowScriptAccess","sameDomain",

      "type", "application/x-shockwave-flash",

      "pluginspage", " http://www.adobe.com/go/getflashplayer"

      );

      // -->

      </script>

      <noscript>

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

      id="flexstore" width="100%" height="100%"

      codebase=" http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">

      <param name="movie" value="main.swf" />

      <param name="quality" value="high" />

      <param name="bgcolor" value="#869ca7" />

      <param name="allowScriptAccess" value="sameDomain" />

      <embed src="Upload.swf" quality="high" bgcolor="#869ca7"

      width="100%" height="100%" name="main" align="middle"

      play="true"

      loop="false"

      quality="high"

      allowScriptAccess="sameDomain"

      type="application/x-shockwave-flash"

      pluginspage=" http://www.adobe.com/go/getflashplayer">

      </embed>

      </object>

      </noscript>

      </body>

      </html>

      -------------------------------------------------


        • 1. Re: File upload issue
          atta707 Level 2
          To me this looks like a problem of the web server running linux. URLRequest says:

          If the object is a URLVariables object and the method is POST, the variables are encoded using x-www-form-urlencoded format and the resulting string is used as POST data. An exception is a call to FileReference.upload(), in which the variables are sent as separate fields in a multipart/form-data post.

          now the question is, does you web server understand "multipart/form-data" method?

          ATTA
          • 2. Re: File upload issue
            arshad_sg Level 1
            Thanks for the reply.

            Yes the web server does understand the multipart-form data format. I can retrieve the Filename, Filedata, and Upload parameters in the Perl script. Any other parameter is not available (and not sent by the browser).

            BTW, I also found out that the changing the name of "uploadDataFieldName" in FileReference.upload method has no effect. The data field name remains "Filedata".

            Here is a network capture of what the browser sent to web server:

            Hypertext Transfer Protocol
            POST /cgi-bin/dump.pl HTTP/1.1\r\n
            Host: localhost\r\n
            Accept: */*\r\n
            User-Agent: Shockwave Flash\n
            Connection: Keep-Alive\n
            Cache-Control: no-cache\r\n
            Content-Length: 1035\r\n
            Expect: 100-continue\r\n
            Content-Type: multipart/form-data; boundary=----------------------------cfeeeabc937d\r\n
            \r\n
            ------------------------------cfeeeabc937d\r\n
            Content-Disposition:form-data; name="Filename"\r\n
            \r\n
            backup.xml\r\n
            ------------------------------cfeeeabc937d\r\n
            Content-Disposition: form-data; name="Filedata"; filename="backup.xml"\r\n
            Content-Type: application/octet-stream\r\n
            \r\n
            <?xml version="1.0" encoding="UTF-8"?>\r\n
            \r\n
            <project name="backup" default="makebackup" basedir=".">\r\n
            \r\n
            <property environment="env"/>\r\n
            <property name="dirname" value="${env.DIRNAME}"/>\r\n
            <property name="archive.name" value="${env.TGZNAME}"/>\r\n
            <property name="excludes" value="${env.EXCLUDES}"/>\r\n
            \r\n
            <target name="makebackup">\r\n
            <tar destfile="${archive.name}.tar.gz" \r\n
            longfile="gnu" \r\n
            compression="gzip">\r\n
            <tarfileset dir="${dirname}" \r\n
            prefix="${dirname}"\r\n
            includes="**"\r\n
            excludes="${excludes}">\r\n
            </tarfileset>\r\n
            </tar>\r\n
            </target>\r\n
            </project>\r\n
            ------------------------------cfeeeabc937d\r\n
            Content-Disposition: form-data; name="Upload"\r\n
            \r\n
            Submit Query\r\n
            ------------------------------cfeeeabc937d\r\n
            \r\n


            Regards
            Arshad