![[image]](http://mowser.com/img?url=http%3A%2F%2Fassets.max.adobe.com%2Fimages%2FMAX09_D125x125.jpg)
« AIR ActionScript / JavaScript Bridge | Main | Flex 3 is Here »
Simple Drag and Drop into AIR
By Rich Tretola | February 25, 2008
4,198 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
After Drop
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
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>
<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 | 6 Comments »
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
June 12th, 2008 at 7:50 pm
hmm… your comment system removed the good stuff…
Reply to this comment
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
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
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