« Indy Flex User Group Tomorrow! | Main | Indy Flex User Group Tonight! »
Simple Drag and Drop AIR
| By Rich Tretola | June 18, 2007 | 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 |









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!
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?
August 11th, 2007 at 1:51 pm
Except for the specified formats add “swf”.
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.
September 25th, 2007 at 1:19 am
to umer
because you stage no have intergate object.
eg. add sprite
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 + "]“);
}
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
October 8th, 2007 at 11:27 pm
AIR beta 2 has some changes that cause the errors.
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?
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?
October 22nd, 2007 at 12:33 pm
This was built on AIR beta 1, beta 2 changed the names of some of the classes.
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
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.
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.
February 22nd, 2008 at 3:44 pm
It will be up next week along with a whole bunch of new AIR tutorials, and components.
September 9th, 2008 at 10:08 pm
Is it able to drag the images from browser to AIR ? How can do it ?
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.
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
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.
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.
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
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);
} }
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);
}
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.