Calendar

February 2008
S M T W T F S
« Jan   Mar »
 12
3456789
10111213141516
17181920212223
242526272829  

Tag Cloud

Categories

Archives

Recent Posts

Recent Comments


« AIR ActionScript / JavaScript Bridge | Main | Flex 3 is Here »

Simple Drag and Drop into AIR

By Rich Tretola | February 25, 2008
6,462 views

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.

Dragging In
dd1.jpg

After Drop
dd2.jpg

Here is some sample code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
  creationComplete="init()">

    <mx:Script>
      <![CDATA[
        import mx.controls.Alert;
        import mx.controls.Image;
        import flash.filesystem.File;

        private function init():void{
          this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,onDragIn);
          this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP,onDrop);
        }

        private function onDragIn(event:NativeDragEvent):void{
          NativeDragManager.acceptDragDrop(this);
        }

        private function onDrop(event:NativeDragEvent):void{
          var dropfiles:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
          for each (var file:File in dropfiles){
            switch (file.extension.toLowerCase()){
              case "png" :
                addImage(file.nativePath);
                    break;
              case "jpg" :
                addImage(file.nativePath);
                break;
              case "jpeg" :
                addImage(file.nativePath);
                break;
              case "gif" :
                addImage(file.nativePath);
                break;
              default:
                Alert.show("Unmapped Extension");
              }
            }
          }

          private function addImage(nativePath:String):void{
            var i:Image = new Image();
            if(Capabilities.os.search("Mac") >= 0){
              i.source = "file://" + nativePath;
            } else {
              i.source = nativePath;
            }
            this.addChild(i);
          }

        ]]>
    </mx:Script>

</mx:WindowedApplication>

Topics: Adobe AIR | 9 Comments »

9 Responses to “Simple Drag and Drop into AIR”

  1. mark johnson Says:
    June 12th, 2008 at 7:47 pm

    using the following to test the file extension would shorten your code a bit:

    if ( “”.indexOf( “”) > -1) { addImage(file.nativePath);
    }

    Reply to this comment

  2. mark johnson Says:
    June 12th, 2008 at 7:50 pm

    hmm… your comment system removed the good stuff…

    Reply to this comment

  3. Jeannie Says:
    November 14th, 2009 at 2:06 am

    This is a great help; I have already learned alot.

    I receive and error saying:
    Type was not found or was not a compile time constant:NativeDragEvent

    I am using a Flash Builder 4 nightly build. Do you know what has changed in using the NativeDragManager?

    Reply to this comment

    Rich Tretola Reply:
    November 14th, 2009 at 4:44 pm

    It should be under flash.desktop.NativeDragManager

    Reply to this comment

  4. Talal Says:
    November 17th, 2009 at 6:11 am

    I really appreciate this script.. this is basic and cute..

    But i have made some following changes using Flex Builder 3 to run it correctly i.e.

    change “import flash.filesystem.file;” to “import flash.filesystem.*;”

    &

    change “addImage(file.nativePath);” to “addImage(file.name);”

    Thanks

    Reply to this comment

  5. custom essay Says:
    January 28th, 2010 at 2:32 pm

    I found your website perfect for my needs. It contains wonderful and helpful posts. I have read most of them and got a lot from them. To me, you are doing the great work. Carry on this. work at home In the end, I would like to thank you for making such a nice website.

    Reply to this comment

  6. Danel Kirch Says:
    March 7th, 2010 at 9:13 am

    Another thing you can do to write less code for switch case is as follows:

    switch (file.extension.toLowerCase()) {
    case “png” :
    case “jpg” :
    case “jpeg” :
    case “gif” :
    addImage(file.nativePath);
    break;
    default:
    Alert.show(”Unmapped Extension”);
    break;
    }

    That will run addImage() on all cases except default.

    Reply to this comment

  7. Cheap Christian Louboutin Shoes Says:
    June 23rd, 2010 at 12:16 am

    I found your website perfect for my needs. It contains wonderful and helpful posts.

    Reply to this comment

  8. christian Says:
    July 11th, 2010 at 11:41 pm

    Christian LOUBOUTIN GOLD LIBELLE
    $349.99
    Add some color to your life!
    ~Christian Louboutin shoes
    ~Gold patent leather
    ~Green, blue and red PVC inserts
    ~Style is called Libelle
    ~Heel is approx. 4 3/4″
    ~Small 1/2″ platform in front
    ~Brand new, guaranteed authentic

    Derived from: Christian Louboutin Online. Detailed Source reference: http://www.christianlouboutin9.com/christian-louboutin-gold-libelle-p-124.html

    Reply to this comment

Comments