• About
• ImageSizer
• Screentweetr
• Blog
• Contact

Psyked *

it’s easy once you know how.

How to: Post images to TwitPic with Actionscript

Posted by James - 05/07/09 at 09:07:23 pm

Uploading images to services like TwitPic is actually as easy as sending a HTTP POST request, which means its also pretty darned simple to upload something from Flash Player 10 or AIR. This is an example for AIR, but doing something similar in Flash Player 10 should also be possible – you just need to swap the references to the File class to FileReference.

So, how do we get our photos on TwitPic?  Well, let’s check the API: TwitPic API. According to the API, it’s just a case of posting an image file with additional parameters of username, password and if you like, message. And the upload location is pretty simple too - http://twitpic.com/api/upload or http://twitpic.com/api/uploadAndPost. One for just uploading, and the other for posting things to your twitter feed at the same time.

If you’re posting automatically to twitter, TwitPic will automatically add the url to your image to the start of your tweet.

So, let’s check out some basic code:

The code:

var urlVars:URLVariables = new URLVariables();
urlVars.username = "username";
urlVars.password = "password";

var urlRequest:URLRequest = new URLRequest("http://twitpic.com/api/upload");
urlRequest.method = URLRequestMethod.POST;
urlRequest.data = urlVars;

var file:File = File.desktopDirectory.resolvePath("test.jpg");
file.upload(urlRequest, 'media');

In a nutshell, that code will upload an image file (called “test.jpg”) from the desktop, to TwitPic.

We create an URLVariables object (which contains the additional parameters required for the POST request), create an URLRequest object with the target http request, set the method, assign the URLVariables to the URLRequest, and then finally grab a reference to our file and call the upload method on the file, passing in the URLRequest.

Ok, URLVariables and URLRequests are simple enough – but the thing that was difficult for me to get my head around was the file.upload() method. What it actually does is convert the File (or FileReference) to binary data, and sends that as an additional URLVariable in the URLRequest.  The first parameter it takes is an URLRequest, and the second is the name of the variable that the binary data is assigned to.  I’d kinda assumed that a single URLVariables object would contain all of the data you’re sending in your request, but when you’re using the File.upload method, it seems to be compositing a new set of variables from the method and the URLRequests’ existing data.  Confusing, to start with.

9 Comments »

1. 

   You can also do it without the AIR stuff if you get corelib (available from Adobe labs, I think… also try google code). It lets you convert any movieclip/image/bitmapdata in flash to jpg or png binary data, and send it as a URLVariable.

   Comment by Gritfish — 6 July 2009 #

2. 

   Gritfish – That’s very good to know – good info.

   Comment by James — 7 July 2009 #

3. 

   hi… thanks for the info but I want put the code on Flex with FileReferense but appears an error:
   “Error #2044: SecurityErrorEvent no controlado: text=Error #2049: Violación de la seguridad Sandbox: http://www.ddsmedia.net/tweet/index.swf no puede cargar datos en http://twitpic.com/api/uploadAndPost.”

   i try with localhost and on server online

   can you help me???
   please

   Comment by isantos — 13 August 2009 #

4. 

   @isantos – I think you need to get a crossdomain.xml file setup on your ddsmedia.net domain – one that allows data loading from external subdomains. That should hopefully sort the issues out.

   Comment by James — 15 August 2009 #

5. 

   thanks for response….

   what is the content of the crossdomain.xml file???

   actually i have a file but i not sure if the contect is the correct…

   can you help me??

   Comment by isantos — 18 August 2009 #

6. 

   hey James…

   i need you help…
   i have a crossdomain.xml file in the server but isn’t work the flex application….
   my file contains the follow lines

   where is the error?? ….
   please help me…

   Comment by isantos — 27 August 2009 #

7. 

   sorry, i don’t post the content file…

   <?xml version="1.0" encoding="utf-8"?>
   <cross-domain-policy>
   <site-control permitted-cross-domain-policies="all"/>
   <allow-access-from domain="*"/>
   <allow-access-from domain="*" secure="false"/>
   <allow-access-from domain="*" to-ports="*"/>
   <allow-http-request-headers-from domain="*" headers="*" secure="false"/>
   </cross-domain-policy>

   Comment by isantos — 27 August 2009 #

8. 

   isantos – One thing to try might be setting the namespaces of your crossdomain file, try replacing the

   <cross-domain-policy>

   node with;

   <cross-domain-policy xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” xsi:noNamespaceSchemaLocation=”http://www.adobe.com/xml/schemas/PolicyFile.xsd”>

   Comment by James — 2 September 2009 #

9. 

   The best way to figure out the error is to run in debug mode, and see what kind of security errors you come across.

   Comment by James — 2 September 2009 #

Leave a comment

Name (required)

Mail (will not be published) (required)

Website

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Note: This post is over 7 months old. You may want to check later in this blog to see if there is new information relevant to your comment.

Notify me of followup comments via e-mail.