Calendar

June 2007
S M T W T F S
« May   Jul »
 12
3456789
10111213141516
17181920212223
24252627282930

Tag Cloud

Categories

Archives

Recent Posts

Recent Comments


« Indy Flex User Group Tomorrow! | Main | Indy Flex User Group Tonight! »

Simple Drag and Drop AIR

By Rich Tretola | June 18, 2007Print This Post Print This Post
7,931 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.

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
56
57
58
59
60
61
62
<?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 flash.desktop.DragActions;
            import mx.controls.Alert;
            import mx.controls.Image;
            import flash.filesystem.File;
            import flash.desktop.TransferableData;
            import flash.desktop.TransferableFormats;
            import flash.events.NativeDragEvent;
            import flash.desktop.DragManager;

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

        public function onDragIn(event:NativeDragEvent):void{
                  DragManager.acceptDragDrop(this);
            }

            public function onDrop(event:NativeDragEvent):void{
                DragManager.dropAction = DragActions.COPY;
                var dropfiles:Array = event.transferable.dataForFormat(TransferableFormats.FILE_LIST_FORMAT) as Array;
                for each (var file:File in dropfiles){
                    switch (file.extension){
                        case "png" :
                            addImage(file.nativePath);
                            break;
                        case "jpg" :
                            addImage(file.nativePath);
                            break;
                        case "gif" :
                            addImage(file.nativePath);
                            break;
                        default:
                            Alert.show("Unmapped Extension");
                    }
              }
            }

            public function onDragExit(event:NativeDragEvent):void{
                trace("Drag exit event.");
            }

            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>

Share this Post


Topics: Adobe AIR, Tutorials |

24 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!

    [Reply to this comment]
  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?

    [Reply to this comment]
  3. Allis Schwarz Says:
    August 11th, 2007 at 1:51 pm

    Except for the specified formats add “swf”.

    [Reply to this comment]
  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.

    [Reply to this comment]
  5. crl Says:
    September 25th, 2007 at 1:19 am

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

    [Reply to this comment]
  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 + "]“);

    }

    [Reply to this comment]
  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

    [Reply to this comment]
  8. everythingflex Says:
    October 8th, 2007 at 11:27 pm

    AIR beta 2 has some changes that cause the errors.

    [Reply to this comment]
  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?

    [Reply to this comment]
  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?

    [Reply to this comment]
  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.

    [Reply to this comment]
  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 :)

    [Reply to this comment]
  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. :-)

    [Reply to this comment]
  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.

    [Reply to this comment]
  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. :-)

    [Reply to this comment]
  16. chong Says:
    September 9th, 2008 at 10:08 pm

    Is it able to drag the images from browser to AIR ? How can do it ?

    [Reply to this comment]
    everythingflex

    Rich Tretola Reply:
    September 10th, 2008 at 7:24 am

    You can not drag an image from a traditional browser (Firefox, IE, etc) as this would violate browser sandbox restrictions.

    [Reply to this comment]
  17. chong Says:
    September 11th, 2008 at 1:00 pm

    Hi,Rich Tretola

    But it’s work ! you can look this one http://forum.j2eemx.com/files/AIR/2008-09-12_forum.j2eemx.com.swf

    [Reply to this comment]
  18. Martin.Hristov Says:
    October 28th, 2008 at 4:51 am

    Hello.

    I am tried to copy just the AS and put it in an application I build through Flash CS3. As I concluded, some of the used classes are part of Flex SDK.
    I installed the above mentioned, but it seems not to give a damn.

    Is there something specific you must do in order to import flex sdk classes in your flash applications?

    Deep thanks to anyone who helps ;)

    M.

    [Reply to this comment]
  19. Joey Rivera Says:
    October 30th, 2008 at 12:13 pm

    Here is an example of drag and drop using AIR in Flash instead of Flex: http://www.joeyrivera.com/2008/uploader-phase-1/

    The above is a personal tool I’m playing around with that allows a person to drag/drop a file or link into the app so it can then do something with it. If you need a more stripped down version with just the drag/drop functionality let me know via email/comments at the site.

    [Reply to this comment]
  20. syed Says:
    October 31st, 2008 at 5:00 am

    Due to hardcoding at the line no 52:
    if(Capabilities.os.search(”Mac”) >= 0){
    i.source = “file://” + nativePath;
    } else {
    i.source = nativePath;
    }
    these kind of applications will not work on linux.

    Either you could have made the similar check for linux or could have written it like this:
    if(Capabilities.os.search(”Win”) >= 0){
    i.source = nativePath;
    } else {
    i.source = “file://” + nativePath;
    }

    which will work on mac as well as linux

    [Reply to this comment]
  21. Jimmy K. Says:
    May 31st, 2009 at 1:25 pm

    I know I’m kind of late in the game, but here is the code I used to get BitmapData from the browser:
    if (oEvent1.clipboard.hasFormat(ClipboardFormats.BITMAP_FORMAT)) {
    var oBitmapData:BitmapData = oEvent1.clipboard.getData(ClipboardFormats.BITMAP_FORMAT) as BitmapData;
    var oBitmap:Bitmap = new Bitmap(oBitmapData);
    this.addChild(oBitmap);
    } }

    [Reply to this comment]
  22. Jimmy K. Says:
    May 31st, 2009 at 1:26 pm

    if (oEvent1.clipboard.hasFormat(ClipboardFormats.BITMAP_FORMAT)) {
    var oBitmapData:BitmapData = oEvent1.clipboard.getData(ClipboardFormats.BITMAP_FORMAT) as BitmapData;
    var oBitmap:Bitmap = new Bitmap(oBitmapData);
    this.addChild(oBitmap);
    }

    [Reply to this comment]
  23. Jimmy K. Says:
    May 31st, 2009 at 1:26 pm

    Argh. This box is too flipping small. Anyway, it may be formatted weird, but it works. Just thought I could help anyone wanted to get browser images to their air app. Later.

    [Reply to this comment]

Comments