• Home
  • About Me
  • AIR Central
  • AS3 Libs
  • Books
  • Flex Central
  • Resources
  • The Guru's
    •  

    Simple Drag and Drop AIR

    Drag and Drop from the desktop to an AIR application is one of the new features of AIR.

    Basically, I add the event listeners to the application to handle the drag events. Then when a file is dropped onto the application, I check the file extension and then handle it if is an image file or throw an alert if not. You can certainly update the switch statement to handle additional file extensions differently.

    Here is some sample code:

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    3.     layout="vertical"
    4.     creationComplete="init()">
    5.     <mx:Script>
    6.         <![CDATA[
    7.             import flash.desktop.DragActions;
    8.             import mx.controls.Alert;
    9.             import mx.controls.Image;
    10.             import flash.filesystem.File;
    11.             import flash.desktop.TransferableData;
    12.             import flash.desktop.TransferableFormats;
    13.             import flash.events.NativeDragEvent;
    14.             import flash.desktop.DragManager;
    15.         
    16.             private function init():void{
    17.                 this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,onDragIn);
    18.                             this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP,onDrop);
    19.                             this.addEventListener(NativeDragEvent.NATIVE_DRAG_EXIT,onDragExit);
    20.             }
    21.            
    22.         public function onDragIn(event:NativeDragEvent):void{
    23.                    DragManager.acceptDragDrop(this);
    24.             }
    25.  
    26.             public function onDrop(event:NativeDragEvent):void{
    27.                 DragManager.dropAction = DragActions.COPY;
    28.                 var dropfiles:Array = event.transferable.dataForFormat(TransferableFormats.FILE_LIST_FORMAT) as Array;
    29.                 for each (var file:File in dropfiles){
    30.                     switch (file.extension){   
    31.                         case "png" :
    32.                             addImage(file.nativePath);
    33.                             break;
    34.                         case "jpg" :
    35.                             addImage(file.nativePath);
    36.                             break;
    37.                         case "gif" :
    38.                             addImage(file.nativePath);
    39.                             break;
    40.                         default:
    41.                            Alert.show("Unmapped Extension");
    42.                     }
    43.               }
    44.             }
    45.           
    46.             public function onDragExit(event:NativeDragEvent):void{
    47.                 trace("Drag exit event.");
    48.             }
    49.             
    50.             private function addImage(nativePath:String):void{
    51.                 var i:Image = new Image();
    52.             if(Capabilities.os.search("Mac") >= 0){
    53.                             i.source = "file://" + nativePath;
    54.                         } else {
    55.                     i.source = nativePath;
    56.                         }
    57.             this.addChild(i);
    58.             }
    59.        
    60.         ]]>
    61.     </mx:Script>
    62. </mx:WindowedApplication>

    This entry was posted on Monday, June 18th, 2007 at 9:57 am and is filed under Adobe AIR (Apollo), Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

    15 Responses to “Simple Drag and Drop AIR”

    1. Daniel Neri Says:
      July 24th, 2007 at 5:50 pm

      Great!

      Thanks for this!

      This is the key to one of the new apps I’m building. Thanks again!

    2. Vijay Says:
      August 2nd, 2007 at 3:35 pm

      I downloaded Flex3 SDK.
      am getting this error when i try to complie the mxml.

      C:>mxmlc dnd.mxml
      Loading configuration file C:FlexSDK3.0frameworksflex-config.xml
      This beta will expire on Wed Oct 31 00:00:00 EDT 2007.
      C:dnd.mxml(22): Error: Type was not found or was not a compile-time constant:
      NativeDragEvent.

      public function onDragIn(event:NativeDragEvent):void{

      C:dnd.mxml(26): Error: Type was not found or was not a compile-time constant:
      NativeDragEvent.

      public function onDrop(event:NativeDragEvent):void{

      C:dnd.mxml(46): Error: Type was not found or was not a compile-time constant:
      NativeDragEvent.

      public function onDragExit(event:NativeDragEvent):void{

      Am i missing any files?

    3. Allis Schwarz Says:
      August 11th, 2007 at 1:51 pm

      Except for the specified formats add “swf”.

    4. umer Says:
      September 2nd, 2007 at 7:45 am

      Why this concept doesn’t work with Flash Based AIR application? I tried to implement this functionality in Flash CS3 AIR application and I used Loader instead of Image to add the image to the display list, but it fails even in the first step i.e. accepting the file. So it doesn’t accept the file, but it shows the lock icon and hence fails in the firs step.

    5. crl Says:
      September 25th, 2007 at 1:19 am

      to umer
      because you stage no have intergate object.
      eg. add sprite

    6. Gregory Pierce Says:
      October 4th, 2007 at 12:56 pm

      DragManager.dropAction = DragActions.COPY;

      var dropFiles:Array = event.clipboard.dataForFormat( ClipboardFormats.FILE_LIST_FORMAT ) as Array;
      for each (var file:File in dropFiles)
      {
      trace(”Adding file with extension [” + file.extension + “]”);

      }

    7. mondo Says:
      October 8th, 2007 at 11:09 pm

      I get errors with Flex Builder 3 beta:

      1119: Access of possibly undefined property transferable through a reference with static type flash.events:NativeDragEvent. Gallery_Manager/src dragTest.mxml line 28 1191899201962 15
      1120: Access of undefined property TransferableFormats. Gallery_Manager/src dragTest.mxml line 28 1191899201963 16

    8. everythingflex Says:
      October 8th, 2007 at 11:27 pm

      AIR beta 2 has some changes that cause the errors.

    9. mondo Says:
      October 9th, 2007 at 11:35 am

      Uninstalled, and then installed AIR 1. Still getting same error in Flex. Some additional library I need to install?

    10. fabianocruz Says:
      October 21st, 2007 at 8:57 am

      I had the exact same errors described above. I am also using Flex Builder 3 beta.

      1119: Access of possibly undefined property transferable through a reference with static type flash.events:NativeDragEvent. line 28 1192971019734 137
      1120: Access of undefined property TransferableFormats. line 28 1192971019734 138

      Any clue what I can do?

    11. everythingflex Says:
      October 22nd, 2007 at 12:33 pm

      This was built on AIR beta 1, beta 2 changed the names of some of the classes.

    12. Jon Bell Says:
      December 8th, 2007 at 6:44 pm

      I’ll be the first to celebrate if you ever make the tweaks to make this work with beta 2 and post it here :)

    13. everythingflex Says:
      December 9th, 2007 at 8:34 am

      Yes, I have a beta 2 example but it doesn’t work with beta 3 so I will just post the beta 3 version after the public release. Stay tuned. :-)

    14. Jixx Says:
      February 22nd, 2008 at 2:20 pm

      Erm, so where is the beta 3 example? This function is the core of my air app. So I need it to work. =( Would appreciate it if you could post an update please.

    15. everythingflex Says:
      February 22nd, 2008 at 3:44 pm

      It will be up next week along with a whole bunch of new AIR tutorials, and components. :-)

    Leave a Reply