Image drag and drop from browsers / desktop to Adobe AIR

For a recent prototype I’m working on, I had the requirement of being able to drag and drop images from either a web browser or the desktop into my Adobe Air application.

While this seemed like a simple task, it turned out a little more difficult than I thought. Every browser writes a slightly different reference of the image to the browser.

In this post, I want to share some of these findings so that you don’t waste too much of your own time trying to figure this out. I assume you know enough about Flex Drag and Drop to understand this post.

The Final Code that Works:

DragAndDrop.as: http://pastie.org/779571

Here is a modified image drag and drop class that allows you to drag files or images from browsers and desktop into your AIR app.

Images are stored into an array called images.

It downloads a copy of the image being dragged in from browsers  into the desktop. But this can be easily changed.

SampleApp.mxml: http://pastie.org/779577

Here is a sample app that uses this code ( imported as DragAndDrop.as ). It shows files being dragged in as images on a Tilelist.

Issues / Mistaken Assumptions I Took.

Here are some mistakes I made:

  • Assumed that a ClipboardFormat.FILE_LIST_FORMAT array would always be populated. Only files dragged from the desktop populate this array.
  • Mistakenly tried to use the BMP stored by firefox as my image and enabled decoding via a BMPDecoder since Flex does not support BMP. Spent a lot of time working on this only to find that Safari downloads an image in the original version, while Chrome and Internet Explorer 7 don’t do either.  To be consistent, I implemented a custom downloader that takes the original image from the web and saves it to disk.

The code is by no means complete. There are a few issues not yet addressed:

  • No checking that AIR is able to render the images. A filter would be
  • It doesn’t deal with Safari’s multiple line urls.
  • You could still drag arbitrary text or URLs.

What gets actually written to the clipboard?

From the File System

  • ClipboardFormats.FILE_LIST_FORMAT –
    an array of each file being dragged in.

Internet Explorer 7

  • ClipboardFormats.FILE_LIST_FORMAT –
    empty array
  • ClipboardFormats.HTML_FORMAT –
    <IMG id=logo height=110 alt=Google src=”/intl/en_uk/images/logo.gif” width=276 onload=window.lol&amp;&amp;lol()>
  • ClipboardFormats.URL_FORMAT / ClipboardFormats.TEXT_FORMAT –
    http://www.google.co.uk/intl/en_uk/images/logo.gif

Firefox 3.5

  • ClipboardFormats.FILE_LIST_FORMAT –
    Array with one item, pointing to the temporary bitmap file of the image in the hard drive in bmp format.
    e.g. C:\Users\tomas.lin\AppData\Local\Temp\yiisxbf7.bmp
  • ClipboardFormats.HTML_FORMAT –
    <span id=”main”><span id=”body”><img alt=”Google” src=”http://www.google.com/intl/en_ALL/images/logo.gif&#8221; id=”logo” onload=”window.lol&amp;&amp;lol()” width=”276″ height=”110″></span></span>
  • ClipboardFormat.URL_FORMAT / ClipboardFormat.TEXT_FORMAT –
    http://www.google.co.uk/intl/en_uk/images/logo.gif

Google Chrome

Safari

Opera 10

  • Nothing. Cannot drag into AIR from Opera. Might as well be using Lynx.

I hope you find this post useful.

3 thoughts on “Image drag and drop from browsers / desktop to Adobe AIR

  1. Kevin

    Great post. Awesome effort figuring all that out. This kind of highlights one of those nightmare no-win scenarios that programmers really don’t want to have code for and thus rarely get right, or maybe even can’t ever get right, particuarly when you start talking mobile browsers etc.
    i.e.

    if (somePlatform && thisVersionOfThisBrowser) { blablablal}
    else if (someOtherPlatform && someOtherBrowser) {blablablablablablabla}
    else ….

    Reply
  2. Randy

    Just found you post. Really nice work. Works great but it seems to be saving everything as a .bmp so when I try to read it later with a standard loader it fails because Flash doesn’t read a .bmp format. Got any ideas?

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s