Drag & Drop of a file into an AIR app (Beta 3)

I thought I will post this as there has been a lot of API changes between Beta2 & Beta3. I will try to compile some info on the migration from Beta2 to Beta3.

For now, one of the major changes affecting this particular scenario is the fact that flash.Desktop.DragManager has now been renamed as flash.desktop.NativeDragManager. Here is how you can achieve the drag & drop of file(s) from desktop. The app actually accepts an image file on drag & drop from desktop and displays it in an Image control.

  1. import NativeDragManager & NativeDragEvent
  2. add event listeners for NativeDragEvent.NATIVE_DRAG_ENTER and NativeDragEvent.NATIVE_DRAG_DROP
  3. In the DRAG_ENTER handler, you call NativeDragManager.acceptDragDrop(this);
  4. In the DRAG_DROP handler, you can get to the file(s) dropped using the following code…
  5. public function onDrop(event:NativeDragEvent):void{
    var dropfiles:Array = event.clipboard.getData( ClipboardFormats.FILE_LIST_FORMAT) as Array;

  6. Now you can loop through the files using a for… each loop as below
  7. for each (var file:File in dropfiles){

  8. Use the file as required in your app. Here I extract the extension of the file, check if it is an image and then load it in an Image control.

You can find the code of the application here…

Application Source


8 Responses to Drag & Drop of a file into an AIR app (Beta 3)

  1. romu says:

    I just moved from flex 3 beta 2 to flex 3 beta 3 and this code doesn’t seem to work.

    the canvas doesn’t accept the drag and drop.

    any clue?

  2. romu says:

    my mistake (don’t run flex builder as administrator or you can’t drag and drop inside :D)

    please delete

  3. […] to Raghu for the little tutorial. The APIs for Flex 3 are changing between each beta release, so it’s good someone’s […]

  4. kanu says:

    can u pls explain how i can drag elements from desktop and drop it in to AIR application.

  5. Thanks you SO much for posting this code. I have found it difficult moving to Flex 3 and reading the manuals. So much stuff intertwines. Anyways, very useful!

  6. Anderson says:

    Hey man!

    Thanks for the source, it works very well!

  7. lee says:

    It’s a shame that an object with children listening to NATIVE_DRAG_ENTER events, will receive a NATIVE_DRAG_ENTER notice for each of it’s children instead of the object.

    Shouldn’t there a property for .dragChildren = false?

  8. Larry says:

    The reason that it isn’t working is that the file extensions aren’t always lowercase. Update the switch statement to:

    switch (file.extension.toLowerCase())

    that way, the case statement for the file extensions will match. On vista 64 bit, my extensions were returned as uppercase.

    Lee – you might want to look into the bubbles and use capture properties of the events….

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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s