Sending byteArray (image) and variables to server-side script as POST data in AS3

A couple things here, I first talked about how to send an image and variables to the server (at the same time) on this post, but it felt a bit weird, the file had no name to retrieve it and the variables were sent as GET. Now while working a with a new colleague, he showed me this code that for him was nothing but for me was amazing. It is a little library called UploadPostHelper made by Jonathan Marston back in 2007 (2007! why didn’t someone talk to me about this library before!!!).

Anyway here is a little code snippet showing how to use it:

var jpegEncoder:JPGEncoder = new JPGEncoder(85); //using the JPGEncoder from as3corelib
var jpegBytes:ByteArray = jpegEncoder.encode(myPicture.bitmapData); //encoding a Bitmap into a ByteArray
 
var urlRequest : URLRequest = new URLRequest();
urlRequest.url = "THE URL OF YOUR SERVER SIDE SCRIPT";
urlRequest.contentType = 'multipart/form-data; boundary=' + UploadPostHelper.getBoundary();
urlRequest.method = URLRequestMethod.POST;
 
//now create an object with the variables you want to send as POST
var postVariables:Object{variable1Name:variable1Data, variable21Name:variable2Data, variable3Name:variable3Data}
urlRequest.data = UploadPostHelper.getPostData( 'image.jpg', jpegBytes,"filedata", postVariables); //here is where the magic happens, filedata will be the name to retrieve the file
urlRequest.requestHeaders.push( new URLRequestHeader( 'Cache-Control', 'no-cache' ) );
 
//from here it is just a normal URLLoader
_pictureUploader = new URLLoader();
_pictureUploader.dataFormat = URLLoaderDataFormat.BINARY;
_pictureUploader.addEventListener( Event.COMPLETE, _onUploadComplete, false, 0, true );
_pictureUploader.load( urlRequest );

How easy and beautiful is that?

So can get the code for the UploadPostHelper at the bottom of this post or I have made a zip file with the .as file here.

Dude, 2007!

, , , , , , , ,

  1. #1 by Tahir Ahmed - July 22nd, 2010 at 06:40

    Hmm interesting. One thing though, can we not pass ByteArray as just another property of the “data” object along-with the rest of the variables as other properties of the same object.

    Why do we have to send ByteArray all alone?

    Btw, on a recent project, I had to send data in a Base64 format rather than ByteArray and I sent the whole bunch (i.e. image in Base64 format plus a bunch of variables) as POST in one call to the back-end app. I am not sure

  2. #2 by Tahir Ahmed - July 22nd, 2010 at 06:58

    Urgh! clipped my comments. Ok so it continues …

    I am not sure how ByteArray would work because in my case, the back-end guys wanted me to send the image data in Base64.

    Anyways, I am curious to know why do we have to send ByteArray in a separate URLLoader process in the first place?

  3. #3 by Guitouxx - July 28th, 2010 at 09:19

    Nice, I was searching for a solution just right now. Thanks :)

  4. #4 by Aava - September 7th, 2010 at 06:35

    Nice post !! thanks

  5. #5 by John - February 3rd, 2011 at 11:37

    i am trying to track down an issue. I cannot get it to work in ie… all other browsers are fine.

  6. #6 by Michiel - March 10th, 2011 at 11:41

    Very useful, thanks for this.

    I’m writing a class that should post data to the server that sometimes includes an image but not always.

    Any tips on how to bend this class to allow this? (maybe just post an empty ByteArray?)

  7. #7 by bill - May 23rd, 2011 at 07:08

    I want to know how to receive value in PHP

  8. #8 by Randy - January 6th, 2012 at 20:03

    Great job – just found this and it saved by bacon. Perfect!

  9. #9 by Ale - November 1st, 2012 at 10:56

    Hola me funciona perfectamente cuando compilo el flash en forma local. Al subir ese swf al servidor no me funciona, alguno tiene idea porque?

    When I upload swf to the server, don’t work. Why?

(will not be published)
Subscribe to comments feed