Post a UIImage to the web

So here is something a lot of people have been wondering to do in the forums. How do I take a UIImage or any image and post it to a website. So this will go over how to do that.

There are two ways to tackle this issue. One we can base64 encode the file and post is normally inside a XML or JSON instance or we can simulate a normal HTML post. This tutorial will go over the HTML post.

This will start off where Using a UIImagePickerController left off. So you can grab the code and start there if you want. So lets begin.

So first open up testPickerViewController.h and we want to add in one outlet and one action.

So here is the outlet we want to add
IBOutlet UIButton *upload;
Here is the action we want to add
IBOutlet UIButton *upload;
Now double click on testPickerViewController.xib and we need to connect the new outlet and action. We also need to create our new upload button. So drag around the current items and place the new button under the grab button. Then you want to make the button hidden by default. The option is as shown below. Do get to that selector you do Tools -> Attributes Inspector

You might also want to setup your UIImageView to aspect fit. If the image is larger then your box you created in IB it will shrink the image to fill it. Click on the UIImageView and in the Attributes Inspector select the following drop down for Mode

Now you want to make your connections to the new outlet and action we created in code. So here is another screenshot of what they should look like

Now it is back to the code. So save this and you can quit IB. 

So open up testPickerViewController.m and find the imagePickerController method and at the end add 
upload.hidden = NO;

That will show our upload button once a image is set.

So now we need to create our uploadImage method that gets called then the button is pressed. So it is below and hopefully pretty well commented.

- (IBAction)uploadImage {
	 turning the image into a NSData object
	 getting the image back out of the UIImageView
	 setting the quality to 90
	NSData *imageData = UIImageJPEGRepresentation(image.image, 90);
	// setting up the URL to post to
	NSString *urlString = @"";
	// setting up the request object now
	NSMutableURLRequest *request = [[[NSMutableURLRequest alloc] init] autorelease];
	[request setURL:[NSURL URLWithString:urlString]];
	[request setHTTPMethod:@"POST"];
	 add some header info now
	 we always need a boundary when we post a file
	 also we need to set the content type
	 You might want to generate a random boundary.. this is just the same 
	 as my output from wireshark on a valid html post
	NSString *boundary = [NSString stringWithString:@"---------------------------14737809831466499882746641449"];
	NSString *contentType = [NSString stringWithFormat:@"multipart/form-data; boundary=%@",boundary];
	[request addValue:contentType forHTTPHeaderField: @"Content-Type"];
	 now lets create the body of the post
	NSMutableData *body = [NSMutableData data];
	[body appendData:[[NSString stringWithFormat:@"rn--%@rn",boundary] dataUsingEncoding:NSUTF8StringEncoding]];	
	[body appendData:[[NSString stringWithString:@"Content-Disposition: form-data; name="userfile"; filename="ipodfile.jpg"rn"] dataUsingEncoding:NSUTF8StringEncoding]];
	[body appendData:[[NSString stringWithString:@"Content-Type: application/octet-streamrnrn"] dataUsingEncoding:NSUTF8StringEncoding]];
	[body appendData:[NSData dataWithData:imageData]];
	[body appendData:[[NSString stringWithFormat:@"rn--%@--rn",boundary] dataUsingEncoding:NSUTF8StringEncoding]];
	// setting the body of the post to the reqeust
	[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];

So now if you build and go you will upload the image you selected to the following image URL

Below is my PHP file I am using to handle uploads.

$uploaddir = './uploads/';
$file = basename($_FILES['userfile']['name']);
$uploadfile = $uploaddir . $file;

if (move_uploaded_file($_FILES['userfile']['tmp_name'], $uploadfile)) {
        echo "{$file}";

It is nothing special. I do an echo so you can see in the console what the file is. If you switch the filename=”” part in the uploadImage section it will be placed as another file.

Files will be removed once they are 10 minutes old on the server so they won’t last but you can use it as a playground.

As always here is my code.

About mike
Currently works for Recurly as a Senior Linux Admin. He has a wonderful wife Thanuja and 2 great children (Anusha and Brandon). His major side project is Photoblog.

  • mohsin

    move_uploaded_file(./uploads/0d7eefd0aee4f1b.jpg) [function.move-uploaded-file]: failed to open stream: No such file or directory in D:wampwwwdemoupload.php on line 12

  • Nitin Gautam

    Do you have Java Version of this?

  • inveni0

    Hello, and thank you for this helpful guide! I was using some different code, and it would connect to the server but not actually do the upload. And that’s why I came to your page. It seems, however, that your code throws a 403 error on my server. Any idea why this might be?

    • inveni0

      Apparently, this is due to server restrictions with cross-site multipart/form-data. I’ve contacted my hosting company for assistance. But if there’s a workaround (besides using .htaccess) involving ASI, I’d be interested in hearing it!

  • Mahesh

    Thanks for your nice information. i works for me very well.

  • MaxSmall

    Good tutorial!

    But how can i upload some image ?
    The first uploaded image is named “ipodfile.jpg” and when I upload an other image is overwrite.

    How I can fixe this ?

  • Dipanjan Dutta

    Upload from device:

    The above example works fine from simulator. But how do I run it on device that is what should I do if I want to upload images from my device?

    Thanks in advance for any help.

  • Haritha

    Used this logic,data received on the Java server is null.
    When i send a base64 encoded string to java server,its failing to draw the image on server side.

  • http://google Rahul

    Its really going to help me to upload an image on to the server.
    thanks a lot..

  • Pingback: Form Data Request using NSURLConnection in IOS()

  • ravikanth

    nice tutorial..!Thanks for providing..I got it..

  • Josh

    hi, i am running your code but it wont go past the choose image part. I can browse the camera roll and choose an image but when you get to the cancel or choose image bit, it freezes when i press choose image. It says something about:

    self.imgPicker.allowsImageEditing = YES; ———- THIS IS DEPRECIATED
    self.imgPicker.allowsEditing = YES; ———- IT SAYS TO USE THIS INSTEAD

    even when using that it still wont work.

    Any thoughts?

    cheers and great tutorial by the way!

    • Viraj

      I am also facing the same problem..
      Have you find some solution for it?


    • Nazim

      If I want to upload pdf file from my iphn … what to do?

    • karthikeyan

      use this..

      – (IBAction)getimage:(id)sender {
      if([UIImagePickerController isSourceTypeAvailable:
      UIImagePickerController *picker= [[UIImagePickerController alloc]init];
      picker.delegate = self;
      picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
      [self presentViewController:picker animated:YES completion:nil];


      and uiimagepiccker delegate….

      – (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)img editingInfo:(NSDictionary *)editInfo {
      self.imgae.image = img;
      [picker dismissModalViewControllerAnimated:YES];

      -(void)imagePickerControllerDidCancel:(UIImagePickerController *) picker
      [picker dismissViewControllerAnimated:YES completion:nil];

    • Tulon

      I am having the exact same problem. Can you guys suggest me how did you solve this problem. Or any other related tutorial? Though it was the best one. :(

  • r.b.niranjan

    Really help full information for me. Thankx for posting this toturial

  • Pingback: 通过Post方式把UIImage 提交到PHP端 | 移动互联·三言堂()

  • The-darknight

    Thanks a lot…
    Things worked for me, your code is really useful.

  • atif

    code is not working properly, please review it

  • ghouse

    Code not working properly. please review again.

  • moluk

    Thank you for your code that work prefect to me !!