Simple imgur iPhone Uploader

Recently I’ve been toying with the idea of adding image uploading to Thoughtback. One easy way to do that is to use another image host and just post a link in the thought. I decided to try out imgur because of their Anonymous API. What it lets you do is upload images to their service, without requiring a username and password. This is great if you just want quick and easy image sharing.

To get started imgur has some good examples of how to upload in a variety of programming languages. I grabbed the iPhone example and copy and pasted it in thinking, “Well that was easy”. It turns out there was a little bit more to do.

Here is the iOS example from their website (with a few typos corrected)

-(NSData *)uploadPhoto:(UIImage *) image {
       NSData   *imageData  = UIImageJPEGRepresentation(image,1);
       NSString *imageB64   = [self escapeString:[imageData base64Encoding]];  //Custom implementations, no built in base64 or HTTP escaping for iPhone
       NSString *uploadCall = [NSStringstringWithFormat:@"key=%@ℑ=%@",imgurKey,imageB64];

       NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@""]];
       [request setHTTPMethod:@"POST"];
       [request setValue:[NSString stringWithFormat:@"%d",[uploadCalllength]] forHTTPHeaderField:@"Content-length"];
       [request setHTTPBody:[uploadCall dataUsingEncoding:NSUTF8StringEncoding]];

       NSURLResponse *response;
       NSError *error = nil;

       NSData *XMLResponse= [NSURLConnection sendSynchronousRequest:requestreturningResponse:&response error:&error];

       return XMLResponse;

The problem with their example was that it wasn’t quite finished.
That Database64Encoding method is not a part of the iOS sdk. You need to do that yourself. So what does it mean exactly?

It means that you need to convert the image data to Base64. That basically means turning your image data into a string so it can be sent up via a POST request. So I did a little bit of Googling and found some code that converts NSData to a Base64 NSString. I got the code from the MGTwitterEngine, but it can be found in a few places.

So after that I thought I should be done. I ran the code and got an error back from imgur. Then I noticed the weird ℑ character in the request. I’m not sure what it’s for, but it didn’t work. I replaced it with “image” and I got a success back from imgur.

Hooray, everything seemed like it was working, but it still wasn’t. When I went to the URL in the response, there was no image. Nothing loaded. What was wrong?

I had a suspicion that there was some funny stuff going on with the encoding so I wrote the base64 encoded string out to a file (it was waaaay too long for NSLog to handle) to see what was actually in it. There were a bunch of /’s and +’s. These are valid URL characters that can definitely mess up query string parsing if you want them to be in one of your arguments.

I pulled out an NSString category I had written to escape valid URL characters and called my stringByEscapingValidURLCharacters method on the base64 string. After trying again I was getting valid stuff back and my image URLs were loading correctly.

So, to prevent others from going through the headaches to make a simple imgur uploader, I decided to open source some example code code.

This code is very simplistic. It is a simple iPhone app that lets you choose an image from the camera or your phone’s library and send it to imgur. The ImgurUploader class calls out to imgur and returns the URL of the original sized image by calling a delegate method. It doesn’t handle any errors right now either. You will also need to get an API key from imgur, which only takes a second. This comes with the “works on my machine” seal of approval.

Check it out on GitHub

This entry was posted in Uncategorized and tagged , , , , , . Bookmark the permalink.

2 Responses to Simple imgur iPhone Uploader

  1. nanting yang says:

    Oh My God…I’m SOOOOOO glad I found your page. The image not showing up issue on imgur uploads was plaguing me all last night and I couldn’t figure out what it was!! The image wouldn’t show up after I used imgur’s example upload code (and a bunch of other methods too, ie AFnetworking, thinking it was an upload/form data issue), but then the error I finally found was something like “216 extraneous bytes after 0x68″, so it had to be an encoding problem.

    THANK YOU for diagnosing the problem and posting your encode URL string code! THANK YOU, THANK YOU!!!

  2. Ram Anantharaman says:

    Thank you so much for keeping this open source. I could not have done this without your help, thank you so much!

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> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>