We are going to further extend our OptionDialog to now choose an image from the photo library, if the index property of 1 (the second button) is selected. Add the following code into your dialog's event listener:

//add event listener
dialog.addEventListener('click',function(e)
{
  Ti.API.info('You selected ' + e.index);
  if(e.index == 1)
  {
    //obtain an image from the gallery
    Titanium.Media.openPhotoGallery({

      success:function(event)
      {
        var image = event.media; 

        // set image view
        Ti.API.debug('Our type was: '+event.mediaType);
        if(event.mediaType == Ti.Media.MEDIA_TYPE_PHOTO)
        {
          var imgView = Titanium.UI.createImageView({
            top: 20,
            left: 20,
            width: 280,
            height: 320
          });

          imgView.image = image;
          win.add(imgView);
        }
      },
      cancel:function()
      {
        //user cancelled the action from within
        //the photo gallery
      }
    });
  }
  else 
  {
    //cancel was tapped
    //user opted not to choose a photo
  }
});

Run your app in the emulator or device and choose the second option from our dialog. The photo library should appear and allow you to select an image. This selection screen will look something like the following screenshot:

This recipe follows more or less the same pattern as when we used the camera to obtain our image. First, we extended the OptionDialog event listener to perform an action when the button index selected equals 1, which in this case is our Photo Gallery button. Our openPhotoGallery() method also fires three events: success, error, and cancel.

Just like the previous recipe, the majority of our processing takes place in the success event. We check that the chosen media was actually a photograph by comparing its mediaType property, and finally we create an ImageView and set its image property to the captured image file, before adding the entire thing to our window.

Now, let's explore media types.