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 = @"http://iphone.zcentric.com/test-upload.php";
	
	// 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];
	
	NSLog(returnString);
}

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

http://iphone.zcentric.com/uploads/ipodfile.jpg

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 "http://iphone.zcentric.com/uploads/{$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.

Comments

126 Responses to “Post a UIImage to the web”
  1. Josh says:

    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 says:

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

      Thanks

    • Nazim says:

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

    • karthikeyan says:

      use this..

      – (IBAction)getimage:(id)sender {
      if([UIImagePickerController isSourceTypeAvailable:
      UIImagePickerControllerSourceTypePhotoLibrary])
      {
      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 says:

      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. :(

  2. r.b.niranjan says:

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

  3. The-darknight says:

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

  4. atif says:

    code is not working properly, please review it

  5. ghouse says:

    Code not working properly. please review again.

  6. moluk says:

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

Trackbacks

Check out what others are saying about this post...
  1. […] is a blog post about it Post a UIImage to the web | Iphone Noob Here is the meat of the code to post […]

  2. […] have a blog post about this Post a UIImage to the web | Iphone Noob Looks like your boundaries are bad __________________ Iphone Noob iPhone Development Blog. […]

  3. […] this? Post a UIImage to the web : Iphone Noob __________________ My Apps on AppStore : gScale (guitar scales reference), […]

  4. […] is a blog post about it Post a UIImage to the web | Iphone Noob Here is the meat of the code to post […]

  5. […] Post a UIImage to the web : Iphone Noob (tags: iphone programming photoupload) This entry was posted on Thursday, March 10th, 2011 at 6:06 pmand is filed under del.icio.us. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. […]

  6. […] I have found quite a bit of advice on the matter on the internet but nothing I try seems to work. This is my objective-c code, based on the tutorial here: http://iphone.zcentric.com/2008/08/29/post-a-uiimage-to-the-web/ […]

  7. […] 原文链接:http://zcentric.com/2008/08/29/post-a-uiimage-to-the-web/ […]



Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

css.php