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.

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

  1. Lionel says:

    Nice !!! Thanks.

  2. Ross R says:

    This is a nice little function. One suggestion for improvement – you should plan for a case in which none of those folders exist.

    On Windows – the user could rename the My Pictures folder to something else – OR, future-proofing, future versions of the various OSes may not use the same name for a default pictures folder. Alternatively, the app could possibly be opened on another platform (Linux, another mobile platform that doesn’t support the browseForImage, etc). I think best practice would dictate having an option that will ALWAYS be there regardless of the platform.

  3. Christian Cantrell says:

    @Ross: Good suggestion. I updated the code.

  4. Pingback: Slides, Links, and Questions From my MAX 2011 Presentation « Christian Cantrell

  5. Hamid says:

    Very nice document. I got it running on my iPad2. I just have a question I try to get the creation date of the selected image, I do the following but it doesnot work. Any idea how I can get that:

    private function onMediaPromiseLoaded(e:Event):void
    {
    var mpLoaderInfo:LoaderInfo = e.target as LoaderInfo;
    this.loadedImage.source = mpLoaderInfo.loader;
    var fileObj:File = new File(mpLoaderInfo.url);
    CreationDate.text = fileObj.creationDate.toDateString();
    }

    Thanks for your support

  6. Pingback: Writing a Cross-platform and Cross-device Application That Browses for Images « Christian Cantrell « marcusjpotter