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
Awesome walk through, keep up the great work with the site.
This was very helpful! Thankyou!!
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?
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?
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 {
Hi, I got “NSInvalidArgumentException: Source type 1 not available” error after I change UIImagePickerControllerSourceTypePhotoLibrary to UIImagePickerControllerSourceTypeCamera, can you tell me why this happen?
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 ?
the simulator doesn’t have a camera so it will crash if you try that
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.
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.
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.
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
Very good. Thank you!
Thanks so much– this was a nice concise description of exactly what I was looking for.
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
Thanks for the article, very well written and simple to follow. Keep more of these coming!
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.
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!
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.
perfect!
Excellent tutorial
please post tutorial which is used to take photos from camera through code
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.
Very helpful, thanks!
Thanks a lot….. The Tutorial was very well explained and helped me a lot.
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!
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…
Hello! Thank you for tutorial, but I have question about How we can create uploading progress bar? (count bytes sent)
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!
thanks for the tutorial. nice girl in the photo, by the way
Thanks for the tutorial, this was my first iPhone app and I learned a lot.
Cheers.
god bless you
@zdmr
Quote!!
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!!!!!!!!!!
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
Thanks a lot!, i thought it would be harder to achieve this but thanks to this tutorial is really easy.
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?
I have your code working, sorta but it takes up the entire screen instead of constraining to the UIImageView…
Please contact me with any way to ensure this will stay in UIImageView as it should based on what is in IB
Great, it’s very easy to follow the tutorial.
Thank you!!!
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!
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.
good tutorial
thanks!
THANKS!!!
Hi ,
Goood work, Not working with IOS 5 … could you please help me out ?
work fine with other devices.
greatahbab@gmail.com
Thanks