![[image]](http://mowser.com/img?url=http%3A%2F%2Fassets.max.adobe.com%2Fimages%2FMAX09_D125x125.jpg)
« Indy Flex User Group Tomorrow! | Main | Indy Flex User Group Tonight! »
Simple Drag and Drop AIR
By Rich Tretola | June 18, 2007
12,561 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
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>
<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>
Topics: Adobe AIR, Tutorials | 28 Comments »
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
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
August 11th, 2007 at 1:51 pm
Except for the specified formats add “swf”.
Reply to this comment
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
September 25th, 2007 at 1:19 am
to umer
because you stage no have intergate object.
eg. add sprite
Reply to this comment
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
October 8th, 2007 at 11:09 pm
I get errors with Flex Builder 3 beta:
1120: Access of undefined property TransferableFormats. Gallery_Manager/src dragTest.mxml line 28 1191899201963 161119: Access of possibly undefined property transferable through a reference with static type flash.events:NativeDragEvent. Gallery_Manager/src dragTest.mxml line 28 1191899201962 15
Reply to this comment
October 8th, 2007 at 11:27 pm
AIR beta 2 has some changes that cause the errors.
Reply to this comment
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
January 1st, 2010 at 12:10 am
You always have great information on your site . Enjoy very much returning. I now have you bookmarked!
Reply to this comment
January 2nd, 2010 at 8:42 pm
I really like returning to your site often…you always have very interesting articles to read like this one. Keep it up and I will also keep your site bookmarked now. Thanks for the content you give.
Reply to this comment
January 25th, 2010 at 5:51 pm
Great information you have here on your site!
Reply to this comment
January 26th, 2010 at 10:15 pm
Not too many site out there that have the kind of information you
present here. Thanks for the content.
Reply to this comment