Writing a Cross-platform and Cross-device Application That Browses for Images

If you’re writing a cross-platform, cross-device AIR application that allows users to pick an image from their local computer/device, there’s a relatively simple technique you can use to make sure the app does the right thing in all contexts (desktop, phones, and tablets). Specifically, I define "the right thing" as:

  • On phones and Android tablets, bring up the full-screen image picker.
  • On iPads, bring up the photo gallery panel and associate it with the button or other UI element that invoked it.
  • On Macs, open a file picker that defaults to ~/Pictures.
  • On Windows, open a file picker that defaults to c:/Users/<username>/My Pictures.

The function below can be used in any AIR application on any supported device, and it should always do the right thing:

private function onOpenPhotoPicker(e:MouseEvent):void
{
    // We're on mobile. Should work well for phones and tablets.
    if (CameraRoll.supportsBrowseForImage)
    {
        var crOpts:CameraRollBrowseOptions = new CameraRollBrowseOptions();
        crOpts.height = this.stage.stageHeight / 3;
        crOpts.width = this.stage.stageWidth / 3;
        crOpts.origin = new Rectangle(e.target.x, e.target.y, e.target.width, e.target.height);
        var cr:CameraRoll = new CameraRoll();
        cr.browseForImage(crOpts);
    }
    else // We're on the desktop
    {
        var picDirectory:File;
        if (File.userDirectory.resolvePath("Pictures").exists)
        {
            picDirectory = File.userDirectory.resolvePath("Pictures");
        }
        else if (File.userDirectory.resolvePath("My Pictures").exists)
        {
            picDirectory = File.userDirectory.resolvePath("My Pictures");
        }
        else
        {
            picDirectory = File.userDirectory;
        }
        picDirectory.browseForOpen("Choose a picture");
    }
}

For more information on CameraRoll changes in AIR 3, see How to Correctly Use the CameraRoll API on iPads.