Using a UIImagePickerController

Apple allows you great access into the images you have taken with your camera or saved on the phone via Safari or such. It also allows you to load up the camera very easily in your code to take pictures from your application.

So the first thing we want to do is start a new project and call it testPicker. You want to create a View based application.

Now that our application is created we want to open up IB and create our view. So double click on the testPickerViewController.xib file and it will launch IB. The first thing you will notice is that is is a blank view. So lets grab a round rectangle button on the view and also a image view controller. So now our view should look something like this

So now we have to create 2 outlets and an action. The outlets are for the items we placed on the view and the action is for the button click. So make sure you are selecting the File’s Owner name and it should be of type testPickerViewController and create 2 outlets and an action. Name them like the following image.

Now we need to connect them. So you just drag the outlet to the correct item on the view and then grab the action over to the button and a box will popup and select touch up inside as an option. It should look like the following

Now we have to write the new class file. Make sure you are still selected to File’s Owner and go to File -> Write Class Files. You should get the following if you did it the correct spot.

Save the file. It will ask you to merge or overwrite. For this just overwrite the files.

Now that we have our view setup, lets do some code. So the first thing is we must set the UIImagePickerController delegates.

So open up testPickerViewController.h and we want to add in the following to the class reference.
UINavigationControllerDelegate, UIImagePickerControllerDelegate>
Now we need to add the reference to our image picker so add the following
UIImagePickerController *imgPicker;
Now we need a property for it.
@property (nonatomic, retain) UIImagePickerController *imgPicker;
So the whole file looks something like this now

@interface testPickerViewController : UIViewController   {
    IBOutlet UIButton *button;
    IBOutlet UIImageView *image;
    UIImagePickerController *imgPicker;
}
- (IBAction)grabImage;

@property (nonatomic, retain) UIImagePickerController *imgPicker;

@end

Now save the file and open up testPickerViewController.m. First we need to synthesize the image picker
@synthesize imgPicker;
Now we need to create the viewDidLoad method and init the image picker.

- (void)viewDidLoad {
self.imgPicker = [[UIImagePickerController alloc] init];
self.imgPicker.allowsImageEditing = YES;
self.imgPicker.delegate = self;
self.imgPicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
}

There are 3 different types of sources you can use

  • UIImagePickerControllerSourceTypeCamera : to load the camera
  • UIImagePickerControllerSourceTypePhotoLibrary : to load images from library
  • UIImagePickerControllerSourceTypeSavedPhotosAlbum : loads all images saved

Also we set the editing to YES. This will allow your user to crop the image and such. The picker controller’s delegate function we will add later will return the information so you can edit the UIImage that is returned if you really wanted. We will not cover that here. At least not yet.

Now lets load the picker on the button click so make the grabImage method look like this

- (IBAction)grabImage {
[self presentModalViewController:self.imgPicker animated:YES];
}

Now if we click build and go, you will be able to click on the grab images button and your image picker will slide up from the bottom and allow you select a image.

Now we need to add in our delegate methods so we can handle the image when a user selects it. The only one we will really cover is imagePickerController. Here is my complete function to take the selected image and then place it into the imageview we created in IB.

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)img editingInfo:(NSDictionary *)editInfo {
image.image = img;
[[picker parentViewController] dismissModalViewControllerAnimated:YES];
}

Here is our final product.

As always you can grab the code here.

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

52 Responses to “Using a UIImagePickerController”
  1. Awesome walk through, keep up the great work with the site.

  2. Ben says:

    This was very helpful! Thankyou!!

  3. schlunzi says:

    Great post!
    Here is a follow up question:
    I would like to allow users to pick an image from the Library as the background for my application. But it is not obvious to me how to save a reference to the image I got from the picker. I could convert the image to png/jpg and save it to the filesystem, but that seems inefficient. Any ideas?

  4. StephenR says:

    Great tutorial, thanks!
    I noticed some image degradation in the simulator once the image is loaded into the window. However, when I change
    self.imgPicker.allowsImageEditing = YES; to =NO the image is pristine. Is this an issue with the simulator?

  5. DamonDanieli says:

    A small note:

    Under the paragraph, “So open up testPickerViewController.h and we want to add in the following to the class reference.” there is a pre tag that interpreted the angle brackets. The line should be:

    @interface testPickerViewController : UIViewController {

  6. fuli says:

    Hi, I got “NSInvalidArgumentException: Source type 1 not available” error after I change UIImagePickerControllerSourceTypePhotoLibrary to UIImagePickerControllerSourceTypeCamera, can you tell me why this happen?

  7. Marta says:

    Hi
    I’ve this same problem as fuli I want to change UIImagePickerControllerSourceTypePhotoLibrary to UIImagePickerControllerSourceTypeCamera or add button for opening the camera
    how can I do this ?

  8. mikezupan says:

    the simulator doesn’t have a camera so it will crash if you try that

  9. rocaz says:

    Mike–I hit a strange thing when I followed the instructions: I ended up with id as my field in the outlets. I obviously did something wrong. I tried various ways to drag and drop to get this to change. In the end I had to manually change the class to UIButton and UIImageView in the testPickerViewController class. Any chance you could elaborate on the step “Name them like the following image.” I would like to figure out how to edit the names from id to the proper class names (under types). I can enter the names but not the types. Also I end up with a warning: “warning: class ‘testPIckerViewController’ does not implement the ‘UINavigationControllerDelegate’ protocol. Any ideas. I’ve gone over you example (it helped a lot) but I’m not sure what I did wrong… The app works and has the correct behavior but I don’t see the explicit step I missed.

  10. rocaz says:

    Mike (et al) it looks like I figured out how to pick the classes. I went back through and found that I could edit if I “tab” after entering the names (ie button). Then go back and double click the type field. still getting the warning. I’m trying to track that one down next.

  11. gm says:

    Mike,

    You lost me with the last part where you added the method imagePickerController. Can you please elaborate how this is linked to the application?

    Plus, any chance UIImagePickerControllerSourceTypeCamera command can be tested in simulator? Can simulator use or access built-in or attached webcam – somehow?

    Great tutorial. Thanks.

  12. rocaz says:

    Mike et al…Another website with loads of info (video based)

    http://iphonedevcentral.org/tutorials.php?page=ViewTutorial&id=47&uid=25219522. I believe my warnings were two fold explained in the video: new sdk lib along with failing to add the correct protocol

  13. Javier Fuchs says:

    Very good. Thank you!

  14. Laura says:

    Thanks so much– this was a nice concise description of exactly what I was looking for.

  15. Ant1 says:

    This is a great tutorial
    But I was wondering if their is a way to zoom on to the image chosen, after it was put into in the app.

    Thank you for repling

  16. Scarf*oo says:

    Thanks for the article, very well written and simple to follow. Keep more of these coming!

  17. Lisa Lee says:

    Mike..

    Great!!! except I can’t get one part.
    Can you help me?
    I open tool windows and I follow to make file’s owner name.
    After that you said make connection. you said drag to action…(kind of). but I don’t get it.
    Could you explain little bit more kindly..????
    Thank you.

  18. Robb says:

    Hi Mike,

    When I change to UIImagePickerControllerSourceTypeCamera and try it on my phone the image will not show up on my imageview even though it will if I pick the image from the photo library. I know that It does get the image properly because I can save it to my photo album. What would I need to do to make it show up in the imageview?

    Thanks!

  19. Dave says:

    I didn’t follow these instructions but tried to use them to correct a couple of problems with my code. I failed (through no fault of this posting), but I wonder if anyone can give me any help or hints.
    I am using…

    – (bool)startTheCamera: (UILabel*)aWindowText: (UIImageView*)aWindowCameraImage
    {
    bool retval = false;

    windowText = aWindowText;
    windowCameraImage = aWindowCameraImage;

    if ( (![UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]))
    {
    windowText.text = @”Camera not available”;
    }
    else
    {
    // now start the camera
    windowText.text = @”Started picker”;
    [self presentModalViewController:self.cameraImgPicker animated:NO];
    retval = true;
    }
    return retval;
    }

    – (void)viewDidLoad // called after the cal to preset the controller is triggered from the startTheCamera()
    {
    self.cameraImgPicker = [[UIImagePickerController alloc] init];
    self.cameraImgPicker.allowsImageEditing = YES;
    self.cameraImgPicker.delegate = self;
    //// self.cameraImgPicker.sourceType = UIImagePickerControllerSourceTypeCamera;
    self.cameraImgPicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    windowText.text = @”Started camera”;
    }

    Even in the emulator it claims the camera is available!

    But NO image picer shows up, although the viewDidLoad IS being called.

  20. mamatha says:

    Excellent tutorial
    please post tutorial which is used to take photos from camera through code

  21. satish says:

    Cool tutorial
    I have question, Is it possible to get the image name with extension of image(JPEG,GIF,PNG) and populate it in a TableView. without displaying the image.

  22. Gilad says:

    Very helpful, thanks!

  23. Anuj Tyagi says:

    Thanks a lot….. The Tutorial was very well explained and helped me a lot.

  24. eg says:

    hey, thanks for this. i think you used to have it upload as well? i downloaded an earlier version of this tutorial, and it references a php file on your server. i was wondering if you could post that so that i could use it for testing.

    thanks!

  25. Ryan says:

    Hi, I am curious – how could I save the user’s choice so that if they close the app it will still have this saved – NSUserDefaults? If so, how would I implement that? Thanks…

  26. pupsor says:

    Hello! Thank you for tutorial, but I have question about How we can create uploading progress bar? (count bytes sent)

  27. Mirco says:

    Hi, very good tutorial! I have one problem, when I add exactly the same to a tab bar application, the tab crashes, have you got any help? Thanks!

  28. john locke says:

    thanks for the tutorial. nice girl in the photo, by the way ;)

  29. Marcus says:

    Thanks for the tutorial, this was my first iPhone app and I learned a lot.

    Cheers.

  30. zdmr says:

    god bless you :)

  31. Michele says:

    @zdmr
    Quote!! :D

  32. IPhoneStruggler says:

    Hello! Thank you for tutorial, but I have question i want to display the selected image in secondviewcontroller instead of displaying it in same view…
    Please help me
    Thanks in Advance!!!!!!!!!!

  33. lubmci says:

    hi all,
    Im getting

    Code Sign error: The identity ‘iPhone Developer’ doesn’t match any valid certificate/private key pair in the default keychain

    This is my first app mega noob can someone help please?

    Regards
    Lub

  34. Leopoldinho says:

    Thanks a lot!, i thought it would be harder to achieve this but thanks to this tutorial is really easy.

  35. iME says:

    Is it possible to add a form field (maybe under ‘grab image’ and ‘upload image’) that will allow the user to add keywords for the image they are about to upload? Then those keywords would be used as the file name?

  36. John says:

    I have your code working, sorta but it takes up the entire screen instead of constraining to the UIImageView…

  37. John says:

    Please contact me with any way to ensure this will stay in UIImageView as it should based on what is in IB

  38. shunmugam Raj says:

    Great, it’s very easy to follow the tutorial.

    Thank you!!!

  39. Ben says:

    Great tutorial!
    One question I have though, is it possible to have the images sent automatically to the server without having to select a specific image? So whenever I take a picture it automatically sends to my server.
    Any help or suggestions would be much appreciated.
    Thank you!

  40. Nizar says:

    salem,

    Thanks for the tutorial
    I’m using UIImagePickerController and i want to get the image path i tried
    NSURL *imagepath =[info objectForKey:@”UIImagePickerControllerReferenceURL”]
    but it always return null.
    Any help or suggestions would be much appreciated.
    Thanks in advance.

  41. Ngoc Tam says:

    good tutorial :) thanks!

  42. syed sami says:

    Hi ,

    Goood work, Not working with IOS 5 … could you please help me out ?
    work fine with other devices.

    greatahbab@gmail.com
    Thanks

  43. Azerue says:

    Works great and simplest code ever…Just One issue i think you have missed
    self.imgPicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;

    this line when code file but you have mentioned in your site.

Trackbacks

Check out what others are saying about this post...
  1. […] I moved on to camera and album capabilities. I found a simple tutorial on accessing the album / camera on the iPhone and manipulating pictures posted by Mike on iPhoneNoob. Better yet, he had an additional post on uploading these pictures to […]

  2. Eureka! says:

    […] *Using a UIImagePickerController […]

  3. […] are some tutorials for UIImagePickerController Tutorial one Tutorial two Tutorial three Tagged: iPhoneobjective-cquestionsUIImageVIew /* * * CONFIGURATION […]



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