FileReference and HttpService Browse Image Modify it then Upload it

Question

Hello,

I am trying to do an image uploader, user can: - browse local file with button.browse - select one and save it as a FileReference. - then we do FileReference.load() then bind the data to our image control. - after we make a rotation on it and change the data of image. - and to finish we upload it to a server.

To change the data of image i get the matrix of the displayed image and transform it then i re-use the new matrix and bind it to my old image:

private function TurnImage():void
{

//Turn it var m:Matrix = _img.transform.matrix; rotateImage(m); _img.transform.matrix = m; }

Now the mater is that i really don't know how to send the data as a file to my server cause its not stored in the FileReference and data inside FileReference is readOnly so we can't change it or create a new, so i can't use .upload();.

Then i tried HttpService.send but i can't figure out how you send a file and not a mxml.

Answer 1

You can use URLLoader to send Binary ByteArray to server, like:

var urlRequest : URLRequest = new URLRequest();
urlRequest.url = 'path to your server';
urlRequest.contentType = 'multipart/form-data; boundary=' + UploadPostHelper.getBoundary();
urlRequest.method = URLRequestMethod.POST;
urlRequest.data = UploadPostHelper.getPostData( 'image.jpg', byteArray );
urlRequest.requestHeaders.push( new URLRequestHeader( 'Cache-Control', 'no-cache' ) );

// create the image loader & send the image to the server:<br />
var urlLoader : URLLoader = new URLLoader();
urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
urlLoader.load( urlRequest );

First get bitmapdata for the image:

// set up a new bitmapdata object that matches the dimensions of the captureContainer;
var bmd : BitmapData = new BitmapData( captureContainer.width, captureContainer.height, true, 0xFFFFFFFF );

// draw the bitmapData from the captureContainer to the bitmapData object:<br />
bmd.draw( captureContainer, new Matrix(), null, null, null, true );

Then get byteArray:

var byteArray : ByteArray = new JPGEncoder( 90 ).encode( bmd );

and use the above URLLoader code to send image to server.

It will work fine, except you wouldn't get the file upload progress like the one you get from FileReference.upload. If you can make upload progress work using URLLoader, please post your answer here.