Sending byteArray and variables to server-side script at the same time

While using the URLLoader classyou can send two types of data to the server. You can either send variables through the URLVariables or by giving a ByteArray to the data property of the URLRequest class. Here is how you would send variables:

package {
  import flash.display.Sprite;
  import flash.net.URLLoader;
  import flash.net.URLRequest;
  import flash.net.URLVariables;
 
  public class URLVariablesExample extends Sprite {
    public function URLVariablesExample() {
      var url:String = "http://www.[yourDomain].com/receiveFile.php";
      var request:URLRequest = new URLRequest(url);
      var variables:URLVariables = new URLVariables();
 
      variables.exampleSessionId = new Date().getTime();
      variables.exampleUserLabel = "guest";
 
      request.data = variables;
 
      var loader:URLLoader = new URLLoader();
      loader.load(request)
    }
  }
}

If you wanted to send a ByteArray, let say to save an image made in your flash on the server, here is how you would pass the data (I’m using the coreLib to convert bitmapData to JPG format which will return a ByteArray) :

package {
  import flash.display.Sprite;
  import flash.net.URLLoader;
  import flash.net.URLRequest;
  import flash.net.URLRequestMethod;
  import flash.display.BitmapData;
  import flash.utils.ByteArray;
  import com.adobe.images.JPGEncoder;
 
  public class ByteArraySendExample extends Sprite {
    public function  ByteArraySendExample() {
      var url:String = "http://www.[yourDomain].com/receiveFile.php";
      var someBitmapData:BitmapData = new BitmapData();//let say we have some bitmapdata
 
      //using the jpeg encoder from the core library
      var jpgEncoder:JPGEncoder = new JPGEncoder(80);
      var myByteArray:ByteArray = jpgEncoder.encode(someBitmapData);
 
      var request:URLRequest = new URLRequest(url);
      request.method = URLRequestMethod.POST;
 
      request.data = myByteArray;
      var loader:URLLoader = new URLLoader();
 
      loader.load(request)
   }
  }
}

The thing is, there is no actual documentation when you want to send both a byteArray and variables. As you can see in the examples, when you send variables, you set the data property of the URLRequest equal the your URLVariables, but when you send a byteArray you also set the data property equal to your byteArray. So you cannot send both type of data at the same time this way. The way I found is actually pretty simple and I don’t why others have not blogged about this (trust me I have looked for this). What you do is you set the data of the URLRequest equal to the byteArray, but you put your variables in the url String of the URLRequest. Here is some code showing it:

package {
  import flash.display.Sprite;
  import flash.net.URLLoader;
  import flash.net.URLRequest;
  import flash.net.URLRequestMethod;
  import flash.display.BitmapData;
  import flash.utils.ByteArray;
  import com.adobe.images.JPGEncoder;
 
  public class   ByteArrayAndVariableSendExample extends Sprite {
    public function  ByteArrayAndVariableSendExample() {
      var url:String = "http://www.[yourDomain].com/receiveFile.php?exampleSessionId=" + new Date().getTime() + "&amp;exampleUserLabel=guest" ;
 
      var someBitmapData:BitmapData = new BitmapData();//let say we have some bitmapdata
 
      //using the jpeg encoder from the core library
      var jpgEncoder:JPGEncoder = new JPGEncoder(80);
      var myByteArray:ByteArray = jpgEncoder.encode(someBitmapData);
 
      var request:URLRequest = new URLRequest(url);
      request.method = URLRequestMethod.POST;
 
      request.data = myByteArray;
      var loader:URLLoader = new URLLoader();
 
      loader.load(request)
    }
  }
}

Then in your server-side script you recover the variables in the query string and the byteArray in the post part. It’s that simple.

ActionScript 3, AS3 CoreLib, File, JPGEncoder, Sever-side, URLLoader, URLVariables, Variables

This entry was posted on Friday, December 19th, 2008, 12:53 pm and is filed under ActionScript 3. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site.

#1 by Justin J. Moses - March 25th, 2009 at 20:02

So simple and I never thought about it

Nice post.

Reply Quote
#2 by till - June 9th, 2009 at 07:06

Thanks for sharing!

Reply Quote
#3 by pushpa - June 15th, 2009 at 09:17

hi

i am creating a drawing application in as3. i want to send the bitmap as an email attachment. i duno php. can u please provide me with a example and source.

thanks a lot

Reply Quote
#4 by Mike - June 28th, 2009 at 20:02

Of course! So simple. Thanks for the hint.

Reply Quote
#5 by boxbuilder - July 9th, 2009 at 05:02

ok, but if I need to send variables by POST?

Reply Quote
#6 by Veronique - July 16th, 2009 at 18:25

Thank you for the post. I have been using it for project where I let users upload images. If the images are larger than 1MB, I resize them on the fly using Matrix and load the bytes.
All of this works. However the URLLoader doesn’t fire up events until after the image is loaded and displays the bytesLoaded and bytesTotal at 2. Any idea why it would do that and how to fix it.
Thanks.

Reply Quote
#7 by aben - September 25th, 2009 at 14:04

thanks for the post. i tried your code for the one where it sends a bytearray. but nothing seems to happen. heres my flex side….

var bitmapData:BitmapData = new BitmapData(txt.width, txt.height);
bitmapData.draw(txt);
var jpg:JPEGEncoder = new JPEGEncoder();
var byteArray:ByteArray = jpg.encode(bitmapData);

var request:URLRequest = new URLRequest(“http://[xxxxx]/Uploader.ashx”);
request.method = URLRequestMethod.POST;
request.data = byteArray;

var loader:URLLoader = new URLLoader();
loader.load(request);
return;

Reply Quote
#8 by sungchul - November 13th, 2009 at 05:25

hi.. thanks for sharing..

how to get byteArray data in server-side-script.
it has no variable name… ^^..

Reply Quote
#9 by Michael - December 1st, 2009 at 12:50

do you have an example of the server-side script involved?

Reply Quote