How can I send a ByteArray (from Flash) and some f

Question

I have a sketch pad made in Flash AS3 like this one here: http://henryjones.us/articles/using-the-as3-jpeg-encoder

I want to send the jpg to the server and some data from a html form field with php. Is there a way to force the Flash movie to deliver the image file when one presses the submit button?

Answer 1

You can use a HTTPService to send data. Here's a tutorial sort introduction.

Answer 2

it's a little tricky: You can do it one of two ways:

Arthem posted this in another thread:

This was of great help to me: http://www.quietless.com/kitchen/upload-bitmapdata-snapshot-to-server-in-as3/

You need to modify the URLRequestWrapper to insert field names and file names where needed. Here's what I've done:

bytes = 'Content-Disposition: form-data; name="' + $fieldName + '"; filename="';

It does the most formatting of headers so the server could understand it as a file upload.

By the way, if you have a BitmapData you might need to encode it to JPEG or PNG first.

And I usually use this solution:

I haven't used the imageshack API, but you may want to try using adobe's JPGEncoder class - here's a quick example that passes a username and the JPG's byte array, it's really quite simple.

private function savePicToServer(bmpData:BitmapData):void
{
    var jpgEncoder:JPGEncoder = new JPGEncoder(85);
    var jpgStream:ByteArray = jpgEncoder.encode(bmpData);

    var loader:URLLoader = new URLLoader();
        configureListeners(loader);

    var header:URLRequestHeader = new URLRequestHeader("Content-type", "application/octet-stream");
    var request:URLRequest = new URLRequest(ModelLocator.BASE_URL + ModelLocator.UPLOAD_URL + "?user=" + ModelLocator.getInstance().username);
    request.requestHeaders.push(header);
    request.method = URLRequestMethod.POST;
    request.data = jpgStream;
    loader.load(request);
}

Note that the variables are passed as part of the query string. You can't use URLVariables, as several people have suggested, as the URLVariables would be stored in the request's data property, which we are already using to pass the byteArray.

Answer 3

You can use AMFPHP or Zend AMF, I just finished a project like this, my product allow a user to change a product color scheme and then output the ByteArray data and other AS3 object directly to PHP, and insert into MySQL, you can see my project and AMFPHP

all PNG transparent images are generated by Flash, and send to AMFPHP, PHP then generate the PNG file on the server.

Answer 4

I wanted to send an encrypted authorization code form Flash to PHP along with a JPG image. It was not suitable to post this in the get variables and so I got around it this way. Most of the code is the actual gathering of a stage snapshot, but only a specific region of it. The part that is relevant to here is the use of writeMultiByte to tack on the encrypted password to the end of the jpb image info. I then send the length of this password using the get variables url string so that PHP know show much to chop off the end.

var stage_snapshot:BitmapData = new BitmapData(600, 120);
var myRectangle:Rectangle = new Rectangle(0, 0, 600, 120);
var myMatrix:Matrix = new Matrix();
var translateMatrix:Matrix = new Matrix();
translateMatrix.translate(-101, -33);
myMatrix.concat(translateMatrix);
stage_snapshot.draw(stage,myMatrix,null,null,myRectangle);
trace ("creating JPGEncoder");
// Setup the JPGEncoder, run the algorithm on the BitmapData, and retrieve the ByteArray
var encoded_jpg:JPGEncoder = new JPGEncoder(100);
var jpg_binary:ByteArray = new ByteArray();
jpg_binary = encoded_jpg.encode(stage_snapshot);
var pw = cryptoSalt.encrypt("mysecretpassword");
**var pwLength = pw.length;
jpg_binary.writeMultiByte(pw,"us-ascii");**
trace ("stage snapshot taken");
var header:URLRequestHeader = new URLRequestHeader ("Content-type", "application/octet-stream");
var request:URLRequest = new URLRequest("savejpg.php?length1=" + pwLength);
request.requestHeaders.push(header);
request.method = URLRequestMethod.POST;
request.data = jpg_binary;
var loader:URLLoader = new URLLoader();
trace ("sending pic to php");
loader.load(request);
loader.addEventListener(Event.COMPLETE,finishSave);

The receiving PHP:

$pwlength = $_GET['length1'];
$jpg = $GLOBALS["HTTP_RAW_POST_DATA"];
$pw = substr($jpg, - $pwlength);
$jpg = substr($jpg,0,strlen($jpg) - $pwlength);
$filename = 'uploads/test.jpg';
file_put_contents($filename, $jpg);
file_put_contents("uploads/pw.txt",$pw);

Answer 5

If you're not using flex, try URLLoader && URLrequest, to pass your data as a POST variable.