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.

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.

August 28, 2008 · Filed Under Uncategorized

Comments

36 Responses to “Using a UIImagePickerController”

Adam Debreczeni on August 28th, 2008 10:23 pm

Awesome walk through, keep up the great work with the site.
Grab image from camera roll - iPhone Dev SDK Forum on September 14th, 2008 7:57 am

[...] have a blog entry about that Iphone Noob
Ben on September 21st, 2008 12:37 pm

This was very helpful! Thankyou!!
schlunzi on September 23rd, 2008 3:16 pm

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?
StephenR on October 11th, 2008 10:15 am

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?
DamonDanieli on October 15th, 2008 5:54 pm

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 {
fuli on October 27th, 2008 12:57 am

Hi, I got “NSInvalidArgumentException: Source type 1 not available” error after I change UIImagePickerControllerSourceTypePhotoLibrary to UIImagePickerControllerSourceTypeCamera, can you tell me why this happen?
Marta on December 4th, 2008 11:03 am

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 ?
mikezupan on December 4th, 2008 11:04 am

the simulator doesn’t have a camera so it will crash if you try that
rocaz on December 11th, 2008 6:18 pm

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.
rocaz on December 12th, 2008 4:09 pm

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.
gm on December 17th, 2008 10:01 am

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.
rocaz on December 17th, 2008 8:15 pm

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
Javier Fuchs on December 27th, 2008 5:12 pm

Very good. Thank you!
Laura on January 30th, 2009 3:01 pm

Thanks so much– this was a nice concise description of exactly what I was looking for.
Ant1 on February 12th, 2009 9:12 am

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
Scarf*oo on April 11th, 2009 11:05 am

Thanks for the article, very well written and simple to follow. Keep more of these coming!
Lisa Lee on April 30th, 2009 12:34 am

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.
Robb on May 21st, 2009 1:33 pm

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!
iCensr [Twitter > camera > album > upload] | Uploading on June 1st, 2009 2:29 am

[...] 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 [...]
Dave on June 1st, 2009 5:30 am

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.
dogan berktas on June 15th, 2009 8:26 pm

perfect!
mamatha on June 29th, 2009 7:29 am

Excellent tutorial
please post tutorial which is used to take photos from camera through code
satish on July 3rd, 2009 6:26 am

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.
Gilad on July 22nd, 2009 5:07 pm

Very helpful, thanks!
Anuj Tyagi on July 23rd, 2009 2:50 am

Thanks a lot….. The Tutorial was very well explained and helped me a lot.
eg on August 10th, 2009 4:29 pm

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!
Ryan on August 18th, 2009 1:42 am

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…
pupsor on August 18th, 2009 10:17 pm

Hello! Thank you for tutorial, but I have question about How we can create uploading progress bar? (count bytes sent)
Mirco on August 26th, 2009 6:21 am

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!
john locke on September 2nd, 2009 11:07 am

thanks for the tutorial. nice girl in the photo, by the way
Marcus on November 19th, 2009 3:28 am

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

Cheers.
Eureka! on March 25th, 2010 10:58 am

[...] *Using a UIImagePickerController [...]
Repeat Simple on April 13th, 2010 4:58 am

[...] http://iphone.zcentric.com/2008/08/28/using-a-uiimagepickercontroller/ [...]
zdmr on May 7th, 2010 10:47 am

god bless you
Michele on June 8th, 2010 2:17 am

@zdmr
Quote!!