Hi this is Marin - the author of Touch Code Magazine, I hope you are enjoying my tutorials and articles. Also if you need a bright iPhone developer overseas contact me - I do contract work. Here's my LinkedIn profile
Add an iCloud photo gallery to your app with MTICloudPhotoGallery library

Edit: 29 Jan 2013, I’ve lost several months of time arguing with the Apple Review Team about this type of using iCloud for storing photos and it seems they were not convinced that iCloud can be used for storage of data from developers. So, if you are following this post, please re-consider the whole dev guideline document from the Apple Dev Center, and use the code cautiously. 

As I previously mentioned on TCM I wrote a nice little library to add photo publishing to iCloud last month when I was finishing “Fun Photo Booth”. Thanks to the chapter “Beginning iCloud” in “iOS 5 by Tutorials” by my co-author Cesare it was quite easy to enable iCloud support, but of course there were also some quirks to work on. As this is also my first post for iDevBlogADay I thought it’d be nice if I package the iCloud library and provide it freely as a download and also walk you through how to use it in your own app.

Library structure

There are 3 different tiers in the library and you can choose which one to use depending on how much customization you need. If you use the top tier only you can add opening and saving images from iCloud with just about 10 lines of Objective-C code (which is always cool). Then you can decided to use the lower level classes also and you can further customize everything from the look to the code itself. Let’s have a look:

At the top you have 2 classes : MTICloudOpenImageButton and MTCloudSaveImageButton – these two classes inherit UIButton and are drop in UI elements you can just add to your interface and have ready interaction with iCloud. In the middle tier you have MTICloudImagesController – this is the controller class you can call to open and save images to iCloud and to check for iCloud availability. At the very bottom you have MTICloudFileOpenViewController – this is a UIViewController class which you can present modally to show the user the images saved to their iCloud.

So as you can see it all goes from top to bottom and you can just plug your code whenever you want in the chain. I’ll show you examples how to use all of the classes.

Enabling your app for iCloud

So to build and test an application enabled for iCloud you’ll need to have an Apple iOS Developer Account and a test device. iCloud is not enabled on the Simulator, so you won’t be able to follow through if you don’t have a developer account. So provided you do, follow this link to an excellent iCloud tutorial by Cesare and scroll down to the “Enabling iCloud in your app” section. Follow the instructions on how to create an iCloud enabled App Bundle ID and when you finish with the setup continue with “Using the ready iCloud buttons” section below.

“Enabling iCloud in your app” by Cesare

Using the ready iCloud buttons

First showcase will be using the ready made iCloud buttons. Download the demo application for this article and we’ll go through the code to oversee the whole process: Demo App.

Now… we need to do one thing before going to the code. If you followed correctly Cesare’s instructions you have created a new iCloud enabled Bundle App ID. Copy this ID and open the “iCloudPhotoGallery-Info.plist” in the demo app. Find the row saying “Bundle Identifier” and replace the value on the right with your own Bundle ID. Done.

Inside the view controller’s header file “MTViewController.h” you’ll see the import that adds the library to the class (this is a one-shot include, it just imports all the classes):

#import "MTICloudImages.h"

and also two protocols to the class definition:

<UIImagePickerControllerDelegate, MTICloudImagesControllerSaveDelegate>

the first you probably know – handles the camera view controller events and the second protocol defines the methods necessary to handle saving an image to iCloud (defined by my library’s protocol, look it up).

Open up the implementation file. Inside viewDidLoad is all the code needed to add the buttons for opening and saving images to iCloud. The open image button:

[self.view addSubview:
  [[MTICloudOpenImageButton buttonAtPosition: CGPointMake(150, 150) withBlock:^(UIImage *image, NSError *error) {
    //code to handle the image from iCloud
    loadImageView.image = image;
  }] animate]
];

As you see creating the open image button is pretty simple – you supply it a position and a block to handle the selected image. In the case of the demo app the selected image is loaded up in a UIImageView. If image is nil – it means the user cancelled the open dialogue, and if error is different than nil than of course there has been some kind of error.

[self.view addSubview:
  [[MTICloudSaveImageButton buttonAtPosition: CGPointMake(150, 380) withBlock:^(NSError *error) {
    //code
    if (error==nil && saveImageView.image!=nil) {
     //save to iCloud
       [[[MTICloudImagesController alloc] init] saveImage: saveImageView.image withDelegate:(id)self];
     }
    }] animate]
  ];

Saving an image to iCloud is similar – we add the button to the view and when tapped we call saveImage:withDelagate: to save the image to iCloud. You can skim down the code which is pretty standard and handles taking photos with the camera. At the very bottom you will find the method required by the MTICloudImagesControllerSaveDelegate protocol: -(void)savedToICloud:(NSError*)error. It just shows a message in the demo app, but you can implement your own logic in your app.

That’s about all the code you need! Connect an iPhone or an iPod to your computer and run the project on the device. Here’s how the app screen looks like:

Note how the buttons flow a bit – this is because I’m calling the -(void)animate method when I add them to the view. You can omit that if you don’t like the floating effect.

Press “Take photo” and make a photo with the device’s camera. You will see the photo load up:

Now press the floating save button to save the image to iCloud.

Now let’s check if the image was saved – tap “open an image from your iCloud” and you will see the photo gallery browser (like in the screenshot below, but showing only the image you just saved):

You can tap a photo to load it up in the app:

You can also swipe right over an item in the list to delete the photo from your iCloud account:

Cool? Yeah :) You can browse inside the library sources and you can just replace the button images to have your own buttons. You can create your own iCloud buttons if you follow this cool and easy tutorial: Create the Apple iCloud logo

Or alternatively if you don’t want the buttons at all go a level lower and do calls directly to MTICloudImagesController:

Using MTICloudImagesController

First you need to know how to check whether iCloud is enabled on the user’s device:

if ([MTICloudImagesController isICloudEnabled]==NO) {
  NSLog(@"iCloud is NOT enabled, do something here ...");
}

To invoke the open image dialogue:

[[[MTICloudImagesController alloc] init] openImageWithBlock:^(UIImage *image, NSError *error) {
  //image opened
  NSLog(@"image selected: %@", image);
  } inViewController: self];

Note you need to pass a view controller which will present the open image dialogue.

And to save the image to iCloud (exactly as above with the button example):

[[[MTICloudImagesController alloc] init] saveImage: myImage withDelegate:(id)self];

And you’ll need to implement -(void)savedToICloud:(NSError*)error on the delegate.

Using the open dialogue only

Finally if you don’t want to use the controller class but you still like the image browser dialogue, you can just present it yourself. Just make an instance of MTICloudFileOpenViewController and set its openDelegate property to your delegate class (also it must implement the MTICloudFileOpenViewControllerDelegate protocol). If you choose for this option, please be aware that the dialogue lists all files ending with “_thumb.png” their file names. When the user selects an images, the dialogue loads a file with the same name but lacking “_thumb” and this is the image that it sends back to its delegate.

Wrap-up

I hope you enjoyed the post and the iCloud photo gallery library will be useful in your apps. Even if not using it as a drop-in you can just browse around the code and quick-start your own iCloud stuff.

Here’s a link to the source code of the library – feel free to use any way you want: Source Code and again the Demo App project

cheers, Marin

The post was originally published on the following URL: http://www.touch-code-magazine.com/add-an-icloud-photo-gallery-to-your-app-with-mticloudphotogallery-library/

 

  ·

 


Marin Todorov

is an independent iOS developer and publisher. He's got more than 18 years of experience in a dozen of languages and platforms. This is his writing project.
» Contact    » Add Marin on Google+

  1. Lee on Monday 28, 2011

    Hi Marin,

    Great day! Thanks so much for your post!

    Just to inform you that there are some typo mistake found in the MTICloudImagesController

    Method
    ——————————————————————————————————————————–
    -(void)openImageWithBlock:(OpenICloudImageCompletion)completion inViewController:(UIViewController*)viewController
    {
    //open the image open controller
    MTICloudFileOpenViewController* openFile = [[MTICloudFileOpenViewController alloc] initWithNibName:@”ICloudFileOpenViewController” bundle:[NSBundle mainBundle]];
    openFile.openDelegate = (id)self;
    [viewController presentViewController: openFile animated:YES completion:nil];
    self.openCompletionBlock = completion;
    }

    ——————————————————————————————————————————–

    initWithNibName:@”ICloudFileOpenViewController”

    should be

    initWithNibName:@”MTICloudFileOpenViewController”

  2. Rob Falla on Monday 28, 2011

    Is it possible to have the system upload all images in a given album?

    While we are at it… is copying images to an album without any user interaction possible?

    I am looking into creating an app that takes pictures, copies them into an album and uploads them to iCloud. Ideally this would be as non-intrusive as possible, only asking the user for permission once, when there application needs to initiate the upload of all the files in the album. This does bring me back to the problem of copying images to a specific album…

    Any thoughts on this?

    Many thanks,

    Rob Falla
    @engagetoday

  3. Marin on Monday 28, 2011

    yeah Rob, you can iterate over the media assets and filter them too … better have a look carefully at the source code of the example + find the tutorial on my site about saving photos into custom photo albums and combine them into one app

  4. Nico on Monday 28, 2011

    Hi Martin, great post!
    I tried to test the demo app with an iPad and iPhone, but couldn’t get both devices synced. If I take a photo with my iPhone it will show up as a blank cell and vice versa with the iPad. Do you know a solution to this?

  5. srinivas on Monday 28, 2011

    Hi Martin,
    Its great tutorial.Can we save video’s into the cloud.If we do,how can we?Can you please suggest me?

  6. srinivas on Monday 28, 2011

    Hi Martin,
    Its great tutorial.Can we save video’s into the cloud.If we do,how can we?Can you please suggest me with the tutorial.Thanks in advance…

  7. [...] I have found one solution of saving and retrieving our photos into the icloud. Go through the following http://www.touch-code-magazine.com/add-an-icloud-photo-gallery-to-your-app-with-mticloudphotogallery… [...]