facebook platform |

Posting an image on a platform which requires it to be of a ‘multipart/form-data’ content type is different from posting a URL link of an image or sending an image as binary data.

For example, both Flickr and Facebook APIs require the ‘multipart/form-data’ type for uploading images and in the latter case I never realized it because there was an existing Facebook API which was doing the work behind the scenes.

Incase of Facebook, if you are using the Facebook Actionscript3 SDK for posting images to your own wall, you are required to convert your image into a ByteArray and then use the API to POST the image. The classes that handle this are the FacebookRequest.as, AbstractFacebookRequest.as and PostRequest.as, but as a developer you may never know of these classes or use them directly.

For instance the code below captures a Movieclip from the stage as a bitmap, encodes it as a PNG and then uploads it to your Facebook wall using the Facebook Actionscript3 SDK.

var bitmapD:BitmapData = new BitmapData(movieClip.width,movieClip.height);
bitmapD.draw(movieClip);  

var imageStream = PNGEncoder.encode(bitmapData);
bitmapD.dispose();

var values:Object = {message:"A test to post image" , fileName:'anyname.jpg' , image:imageStream};  
FacebookMobile.api('/me/photos', onCheckResult, values,'POST');

var bitmapD:BitmapData = new BitmapData(movieClip.width,movieClip.height);

bitmapD.draw(movieClip);

var imageStream = PNGEncoder.encode(bitmapData);

bitmapD.dispose();

var values:Object = {message:"A test to post image" , fileName:'anyname.jpg' , image:imageStream};

FacebookMobile.api('/me/photos', onCheckResult, values,'POST');

In my case I did not have any SDK or classes to work with this particular content type. That’s when I read about the UploadPostHelper.as class written by Jonathan Marston. It is an old class written in 2007 so it needed minor modifications to work with today, but nonetheless, it served the purpose of building a POST request with properly formatted headers required by the server to interpret the content of multipart/form-data type.
Assuming if I had to rewrite the code to post an image to Facebook without an SDK, the code below would work just as well.

var bitmapD:BitmapData = new BitmapData(movieClip.width,movieClip.height);
bitmapD.draw(movieClip);

var imageStream = PNGEncoder.encode(bitmapData);
bitmapD.dispose();
postData();

function postData():void{
    var loader:URLLoader = new URLLoader();
    var urlRequest:URLRequest = new URLRequest();	
    var variables:URLVariables = new URLVariables();

    urlRequest.url = "https://graph.facebook.com/me/photos";
    urlRequest.contentType = "multipart/form-data; boundary=" + UploadPostHelper.getBoundary();
    urlRequest.method = URLRequestMethod.POST;
    var postVariables:Object = {}
    if (this.accessToken != ""){
	postVariables.access_token = this.accessToken;
    }
    postVariables.message = "A test to post image";
    urlRequest.data = UploadPostHelper.getPostData("anyname.jpg", imageStream, postVariables);
    urlRequest.requestHeaders.push( new URLRequestHeader( 'Cache-Control', 'no-cache' ) );
    loader.dataFormat = URLLoaderDataFormat.BINARY;
    loader.load(urlRequest);
}

var bitmapD:BitmapData = new BitmapData(movieClip.width,movieClip.height);

bitmapD.draw(movieClip);

var imageStream = PNGEncoder.encode(bitmapData);

bitmapD.dispose();

postData();

function postData():void{

var loader:URLLoader = new URLLoader();

var urlRequest:URLRequest = new URLRequest();

var variables:URLVariables = new URLVariables();

urlRequest.url = "https://graph.facebook.com/me/photos";

urlRequest.contentType = "multipart/form-data; boundary=" + UploadPostHelper.getBoundary();

urlRequest.method = URLRequestMethod.POST;

var postVariables:Object = {}

if (this.accessToken != ""){

postVariables.access_token = this.accessToken;

}

postVariables.message = "A test to post image";

urlRequest.data = UploadPostHelper.getPostData("anyname.jpg", imageStream, postVariables);

urlRequest.requestHeaders.push( new URLRequestHeader( 'Cache-Control', 'no-cache' ) );

loader.dataFormat = URLLoaderDataFormat.BINARY;

loader.load(urlRequest);

}

Write to me if you want the UploadPostHelper.as class with the changes I’ve made to it or have suggestions to work with image data.

Mariam

Facebook IS building the social web! It has more than 800 million active users and connects more than 500 million users monthly on its Facebook Platform through devices, apps and websites (source Facebook Statistics).

With such a huge demand for content on the Facebook Platform, the requirement for developers has also grown, thus leading to more learning material being available; material especially related to tips, best practices and simple guides to help one progress with the platform.

One of the newest resources for Facebook Developers is – the Flash Facebook Cookbook by James Ford. I received a copy of this book and decided to write a short review for it while reading it.

The Flash Facebook Cookbook contains around 60+ recipes for integrating Flash applications with the Graph API and Facebook. The recipes are simple and start with the basic explanation of Facebook and Flash integration. It graduates to moderate and complex examples such as News Feeds, working with the photo albums, uploading pictures, working with events and integrating HTML5 geolocation capabilities etc.

The book does not expect the developer to know the Facebook platform, but does expect some knowledge of working with Flash Builder and the Flex framework. It uses the Facebook Actionscript 3 SDK available from Github. Apparently this version is supposed to be more community driven than the official Facebook Actionscript SDK supported by Adobe and Facebook on the Google Code repository. I’ve always worked with the official version of the SDK, so I didn’t try using the Github version with the receipes.

I think it is fair to say that the book is a good resource for Facebook development on the Flash platform for the web and desktop. It does not cover the mobile platform, although a refined developer will be able to adapt the knowledge gained from this book to multiple Flash supported platforms.

Mariam

Tag Archives: facebook platform

Build a URLRequest with headers of multipart/form-data content type with ActionScript

Flash Facebook Cookbook Review

Games, Devices, Technology