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

BitmapData

 

 

 

 

 

 

 

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.

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.

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

4 thoughts on “Build a URLRequest with headers of multipart/form-data content type with ActionScript”

  1. Hi

    I’m trying to upload photo with Twitter API that also requires multipart/form-data

    https://dev.twitter.com/docs/api/1.1/post/statuses/update_with_media

    Used OAuth to login and can post status without problems, using your example to upload a photo I’m getting Stream Error over and over again

    Error #2032: Stream Error. URL: https://api.twitter.com/1.1/statuses/update_with_media.json?oauth_consumer_key=XXXXX&oauth_nonce=XXXX&oauth_signature=XXXXX&oauth_signature_method=HMAC-SHA1&oauth_timestamp=1376673067&oauth_token=XXXX-XXXXX

    Here is my code

    //image is a JPG encoded ByteArray

    var params:Object = {};
    params.status = status;

    token = new OAuthToken(twitterSO.data.twitter.accessKey, twitterSO.data.twitter.accessSecret);
    var postRequest:OAuthRequest = new OAuthRequest(OAuthRequest.HTTP_MEHTOD_POST, API_URL + “statuses/update_with_media.json”, null, oAuthConsumer, token);

    var urlRequest:URLRequest = new URLRequest(postRequest.buildRequest(new OAuthSignatureMethod_HMAC_SHA1()));
    urlRequest.method = URLRequestMethod.POST;

    urlRequest.contentType = ‘multipart/form-data; boundary=’ + UploadPostHelper.getBoundary();
    urlRequest.method = URLRequestMethod.POST;
    urlRequest.data = UploadPostHelper.getPostData(“image.jpg”, image, params);
    urlRequest.requestHeaders.push(new URLRequestHeader(“Cache-Control”, “no-cache”));

    var urlLoader:URLLoader = new URLLoader();
    urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
    urlLoader.load(urlRequest);

    Don’t know if my problem could be that changes that you mention on UploadPostHelper.as

    Can you give me a hand?

    Thanks in advance

  2. Probably this way is much more clear :)

    public function postImageToTwitter(status:String, image:ByteArray, latitude:String = “”, longitude:String = “”):void
    {
    token = new OAuthToken(twitterSO.data.twitter.accessKey, twitterSO.data.twitter.accessSecret);

    var postRequest:OAuthRequest = new OAuthRequest(OAuthRequest.HTTP_MEHTOD_POST,
    API_URL + “statuses/update_with_media.json”, null, oAuthConsumer, token);
    postRequest.buildRequest(new OAuthSignatureMethod_HMAC_SHA1());

    var params:Object = new Object();
    params.status = status;
    params.lat = latitude;
    params.lon = longitude;
    params.oauth_consumer_key = postRequest.requestParams.oauth_consumer_key;
    params.oauth_nonce = postRequest.requestParams.oauth_nonce;
    params.oauth_signature = postRequest.requestParams.oauth_signature;
    params.oauth_signature_method = postRequest.requestParams.oauth_signature_method;
    params.oauth_timestamp = postRequest.requestParams.oauth_timestamp;
    params.oauth_token = postRequest.requestParams.oauth_token;

    var urlRequest:URLRequest = new URLRequest();
    urlRequest.url = API_URL + “statuses/update_with_media.json”;
    urlRequest.contentType = “multipart/form-data; boundary=” + UploadPostHelper.getBoundary();
    urlRequest.method = URLRequestMethod.POST;
    urlRequest.data = UploadPostHelper.getPostData(“image.jpg”, image, params);
    urlRequest.requestHeaders.push(new URLRequestHeader(‘Cache-Control’, ‘no-cache’));

    var urlLoader:URLLoader = new URLLoader();
    urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
    urlLoader.addEventListener(Event.COMPLETE, onTwitterPostComplete);
    urlLoader.addEventListener(IOErrorEvent.IO_ERROR, onTwitterIOError);
    urlLoader.addEventListener(HTTPStatusEvent.HTTP_STATUS, onTwitterHttpStatus);
    urlLoader.load(urlRequest);
    }

    On API documentation says this (‘Your POST request’s Content-Type should be set to multipart/form-data with the media[] parameter’) but dont know what it means

    Appreciate a lot if you can help me :)

  3. dear Mariam,

    Thanks for this post. I think it gonna save my day as I am building an app for Facebook from flash. May I get your modified UploadPostHelper.as

    Thanks a lot! :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">