Uploading an image from a UIImage as a JPEG together with other POST-data

Question

I am making a web service and an iOS app using this web service. The web service's API accepts a HTTP POST request with two POST-variables:

1. picture[title] the title of the picture
2. picture[picture] the picture data itself

Now with HTML this is not a problem as the web browser constructs the request and the only thing I have to worry about is enctype="multipart/form-data".

But with the iOS app I have two problems, together with two questions I am going to ask right now.

1. How to convert the UIImage from the image picker or camera to raw JPEG-data?
2. How to make the NSURLRequest with the right POST-data, which must contain the picture[title]-field as plain text and the picture[picture] field with the JPEG-data? On the server-side I use the Paperclip gem, comparable with PHP's $_FILES.

I have seen some examples of uploading an image, but this only includes the image, not other POST-variables.

Can anyone help me? Thanks.

Answer 1

Check out this tutorial, which is pretty nice:

http://iphone.zcentric.com/2008/08/29/post-a-uiimage-to-the-web/

One thing that's not quite right about it is that it passes 90 as a quality setting to UIImageJPEGRepresentation, which actually takes quality as a float between 0.0 and 1.0, so that should be 0.9 instead. I'm sure the code works, it's just specifying 100% quality instead of 90% as probably intended. And, just for convenience and in case that link breaks, here's the relevant code (refactored for clarity and to better fit the question):

- (void)uploadImage:(UIImage *)image toURL:(NSURL *)url withTitle:(NSString *)title {

  // encode the image as JPEG
  NSData *imageData = UIImageJPEGRepresentation(image, 0.9);

  // set up the request
  NSMutableURLRequest *request = [[[NSMutableURLRequest alloc] init] autorelease];
  [request setURL:url];

  // create a boundary to delineate the file
  NSString *boundary = @"14737809831466499882746641449";
  // tell the server what to expect
  NSString *contentType = 
    [NSString stringWithFormat:@"multipart/form-data; boundary=%@", boundary];
  [request addValue:contentType forHTTPHeaderField: @"Content-Type"];

  // make a buffer for the post body
  NSMutableData *body = [NSMutableData data];

  // add a boundary to show where the title starts
  [body appendData:[[NSString stringWithFormat:@"\r\n--%@\r\n", boundary] 
    dataUsingEncoding:NSASCIIStringEncoding]];

  // add the title
  [body appendData:[
    @"Content-Disposition: form-data; name=\"title\"\r\n\r\n"
    dataUsingEncoding:NSASCIIStringEncoding]];
  [body appendData:[title
    dataUsingEncoding:NSASCIIStringEncoding]];

  // add a boundary to show where the file starts
  [body appendData:[[NSString stringWithFormat:@"\r\n--%@\r\n", boundary] 
    dataUsingEncoding:NSASCIIStringEncoding]];

  // add a form field
  [body appendData:[
    @"Content-Disposition: form-data; name=\"picture\"; filename=\"image.jpeg\"\r\n"
    dataUsingEncoding:NSASCIIStringEncoding]];

  // tell the server to expect some binary
  [body appendData:[
    @"Content-Type: application/octet-stream\r\n"
    dataUsingEncoding:NSASCIIStringEncoding]];
  [body appendData:[
    @"Content-Transfer-Encoding: binary\r\n"
    dataUsingEncoding:NSASCIIStringEncoding]];
  [body appendData:[[NSString stringWithFormat:
    @"Content-Length: %i\r\n\r\n", imageData.length]
    dataUsingEncoding:NSASCIIStringEncoding]];

  // add the payload
  [body appendData:[NSData dataWithData:imageData]];

  // tell the server the payload has ended
  [body appendData:
    [[NSString stringWithFormat:@"\r\n--%@--\r\n", boundary] 
    dataUsingEncoding:NSASCIIStringEncoding]];

  // add the POST data as the request body
  [request setHTTPMethod:@"POST"];
  [request setHTTPBody:body];

  // now lets make the connection to the web
  NSData *returnData = [NSURLConnection sendSynchronousRequest:request returningResponse:nil error:nil];
  NSString *returnString = [[NSString alloc] initWithData:returnData encoding:NSUTF8StringEncoding];

  NSLog(@"%@", returnString);
}

I haven't actually compiled it as it's written here, so it probably contains some issues.

In PHP, you should see that $_REQUEST['title'] and $_FILES['picture'] are set.