There are a number of ways to post an image to Twitter, including using a service such as yfrog or TwitPic. However, for this example we are going to post the image to our own server using PHP and return back the URL. You will need a server running PHP with the GDImage for this recipe to work. There are plenty of cheap or free PHP hosting services online if you don't already have a server. Alternatively, if you are proficient in another web language (such as ASP.NET) you can always rewrite the sample code as you see fit.
Create a new file on your server called upload.php and save it with the following contents:
<?php
$target = getcwd();
$target = $target .'/'. $_POST['randomFilename'];
if(move_uploaded_file($_FILES['media']['tmp_name'], $target))
{
$filename = $target;
// Get dimensions of the original image
list($current_width, $current_height) = getimagesize($filename);
// The x and y coordinates on the original image where we
// will begin cropping the image
$left = 0;
$top = 0;
// This will be the final size of the image (e.g. how many pixels
// left and down we will be going)
$crop_width = $current_width;
$crop_height = $current_height;
// Resample the image
$canvas = imagecreatetruecolor($crop_width, $crop_height);
$current_image = imagecreatefromjpeg($filename);
imagecopy($canvas, $current_image, 0, 0, $left, $top, $current_width, $current_height);
imagejpeg($canvas, $filename, 100);
echo 'http://<mysite.com>/'.$_POST['randomFilename'];
}
else
{
echo "0";
}
?>Now in the
postToTwitter function in your existing app.js file, we are going to extend the code in order to accommodate posting an image to our server. However, before performing any post image code, we will perform an authorized method call to the Birdhouse API and ensure that the user is currently logged into Twitter. We'll also generate a random 5-letter filename. It's important to keep this nice and short to keep the number of characters we're using to a minimum as Twitter messages have a 140-character limit!
function randomString(length,current){
current = current ? current : '';
return length ? randomString( --length , "abcdefghiklmnopqrstuvwxyz".charAt( Math.floor( Math.random() * 60 ) ) + current ) : current;
}
//create your twitter session and post a tweet
function postToTwitter()
{
var BH = new BirdHouse({
consumer_key: "<your consumer key>",
consumer_secret: "<your consumer secret>"
});
if(!BH.authorized){
BH.authorize();
}
else
{
//create the httpRequest
var xhr = Titanium.Network.createHTTPClient();
//open the httpRequest
xhr.open('POST','http://<mysite>.com/upload.php'),
xhr.onload = function(response) {
//the image upload method has finished
if(this.responseText != '0')
{
var imageURL = this.responseText;
alert('Your image was uploaded to ' + imageURL);
//now we have an imageURL we can post a tweet
//using birdhouse!
}
else
{
alert('The upload did not work! Check your PHP server settings.'),
}
};
// send the data
var r = randomString(5) + '.jpg';
xhr.send({'media': selectedImage, 'randomFilename': r});
}
}Here we are utilizing some of our existing knowledge in posting via HttpRequest and then extending that knowledge to also send across blob data, using PHP and GDImage. This is then used to write that blob data to an image file on our remote server before returning the new URL. You'll notice that we also extended our postToTwitter function to check whether the user is already authorized against Twitter or not before performing this post.