Check out the previous in the series:

Once you’ve done that, then let’s begin.

In this our sixth and penultimate tutorial I will show you how to present a UIImagePickerController in which a user can select an image of their choice and then add the users selected image into the document.

Let’s get right to it, in our ‘checkSelection’ method add the following code:

UIBarButtonItem *insertPhoto = [[UIBarButtonItem alloc] initWithTitle:@"Photo+" style:UIBarButtonItemStyleBordered target:self action:@selector(insertPhoto:)];

[items addObject:insertPhoto];

Okay now that’s done let’s head straight forward and implement the ‘insertPhoto:’ method:

- (void)insertPhoto:(id)sender {

    UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];

    imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;

    imagePicker.delegate = self; 



    UIPopoverController *popover = [[UIPopoverController alloc] initWithContentViewController:imagePicker];

    [popover presentPopoverFromBarButtonItem:(UIBarButtonItem *)sender permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES];

    imagePickerPopover = popover;



    [imagePicker release];

}

What we’ve done here is created a image picker, set up some of its properties but most importantly its delegate. We then create a popover with the image picker as its content view, present it, assign it to a property for later use and release what we have to.

Seeing as though we haven’t yet added that property, just switch to the header file and add the following code in the appropriate place:

UIPopoverController *imagePickerPopover;

Now what we must do is implement one of the UIImagePickerController’s delegate methods to be notified when an image is selected. Let’s implement said method as well as adding a static variable:

static int i = 0;



- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {

    // Obtain the path to save to

    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);

    NSString *documentsDirectory = [paths objectAtIndex:0];

    NSString *imagePath = [documentsDirectory stringByAppendingPathComponent:[NSString stringWithFormat:@"photo%i.png", i]];



    // Extract image from the picker and save it

    NSString *mediaType = [info objectForKey:UIImagePickerControllerMediaType];

    if ([mediaType isEqualToString:@"public.image"]){

        UIImage *image = [info objectForKey:UIImagePickerControllerOriginalImage];

        NSData *data = UIImagePNGRepresentation(image);

        [data writeToFile:imagePath atomically:YES];

    }



    [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"document.execCommand('insertImage', false, '%@')", imagePath]];

    [imagePickerPopover dismissPopoverAnimated:YES];

    i++;

}

Unfortunately what we want to do isn’t as easy as you might have thought, we can’t just take a UIImage and tell it to insert it, we have to save this image first before, so that we have a path to it which we can pass to the ‘execCommand’ function in the javascript.

The first block of the code is simply finding the documents directory and creating a path for where we can place the image. After this we get the image and write it to the path we created and finally we execute the command via javascript passing it our path to the image.

You may have also noticed that we use a static int ‘i’ which we use to change the photo path every time we insert a photo. We have to do this because if we don’t change the name and just overwrite the existing file then when we add the image to the web view then it just assumes it’s the same as the other image so adds the same image due to caching.

And that’s it, all done! You’ll have to test this on a device if you want to see it working as the simulator has no photos in it’s library but it should work like a charm.

Coming up next time!

I hope you’re looking forward to our next and last tutorial which will include subclassing UIGestureRecognizer, dealing with and using blocks but most importantly expanding our knowledge of javascript. What are we doing I hear you ask, adding drag and drop to our images of course!

Next in the series:

Enjoyed this Article?

Related Articles

About the Author: Josh Garnham

Josh is an indie Mac and iOS Developer with 2 years of experience behind him. You may know him as the developer of Spark for Mac as well as 4Score and 2Code for iOS. He is also a huge Apple lover, a Star Trek fan and active users on both Stack Overflow and Twitter

Check out his website