AIR Example : Native Drag and Drop at Mike Chambers

AIR Example : Native Drag and Drop

Here is a simple example that shows how to enable your Adobe AIR application to accept native drag and drop operations.

This is a simple application that allows you to drag a text file into the application and then view its contents.

DragAndDropExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
	creationComplete="onCreationComplete()"
	xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

	<mx:Script source="DragAndDropExampleClass.as" />

	<mx:TextArea top="10" right="10" bottom="10" left="251"
			id="outputField" />
	<mx:Text text="Drag a Text File into the Application"
			width="233" height="148" top="11" left="10"/>

</mx:WindowedApplication>

DragAndDropExampleClass.as

import flash.desktop.ClipboardFormats;
import flash.desktop.DragManager;
import flash.events.NativeDragEvent;
import flash.filesystem.File;
import flash.filesystem.FileMode;
import flash.filesystem.FileStream;

//called when app has initialized and is about to display
private function onCreationComplete():void
{
	//register for the drag enter event
	addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragIn);

	//register for the drag drop event
	addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);
}

//called when the user drags an item into the component area
private function onDragIn(e:NativeDragEvent):void
{
	//check and see if files are being drug in
	if(e.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT))
	{
		//get the array of files
		var files:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;

		//make sure only one file is dragged in (i.e. this app doesn't
		//support dragging in multiple files)
		if(files.length == 1)
		{
			//accept the drag action
			DragManager.acceptDragDrop(this);
		}
	}
}

//called when the user drops an item over the component
private function onDragDrop(e:NativeDragEvent):void
{
	//get the array of files being drug into the app
	var arr:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;

	//grab the files file
	var f:File = File(arr[0]);

	//create a FileStream to work with the file
	var fs:FileStream = new FileStream();

		//open the file for reading
		fs.open(f, FileMode.READ);

	//read the file as a string
	var data:String = fs.readUTFBytes(fs.bytesAvailable);

		//close the file
		fs.close();

	//display the contents of the file
	outputField.text = data;
}

One of the cool things about the API, is that you can have specific components within your application accept native drag and drop operations (and not just your entire app).

Note, right now, the app is not doing any checking to confirm that the file is a text file. If you try and drag a binary file into the app you will get weird results. (Im looking into how to check that the file is text based).

Written by mikechambers

November 7th, 2007 at 5:51 am

Posted in air

22 Responses to 'AIR Example : Native Drag and Drop'

Subscribe to comments with RSS or TrackBack to 'AIR Example : Native Drag and Drop'.

Hey Mike. We have integrated exactly this in our Qoove Notes app. You can download it from on http://www.apollohunter.com

Alexander Marktl

7 Nov 07 at 8:06 am
[...] Mike Chambers ha posteado un ejemplo de como realizar un Drag & Drop en AIR. [...]

blog.2grafic.com » Blog Archive » Ejemplo AIR: Drag & Drop

9 Nov 07 at 7:45 am
How about going the other way. Dragging say a line from a datagrid to the native OS filesystem… get the OS to accept the drop and then writing a file to that location with data from that datagrid line. Everyone and their dog is blogging about dragging INTO AIR, but there’s only web tumbleweeds when searching for dragging out of AIR.

Victor

12 Nov 07 at 10:36 am
Is there any way to drag an image to an AIR application (or copy/paste an image)??

Best I can tell AIR/Flex doesn’t support image copy/paste/drag/drop.

phil swenson

15 Nov 07 at 1:50 pm
@Victor
I believe – users want the most user friendly API whether its dragged into AIR or dragged out of it.
Good work Mike and Alexander- thanks for sharing them.

A Grant

9 Dec 07 at 2:55 am
Mike:

Any examples of “One of the cool things about the API, is that you can have specific components within your application accept native drag and drop operations (and not just your entire app).” ?

I’ve been trying it, but it seems like DragManager.acceptDragDrop(); doesn’t seem to work on anything but the root application. When I drag stuff over, I see the add cursor for a split second, and then it goes away, like the acceptDragDrop() got overridden somewhere. Here’s a code sample:

private function init():void {
// listen for drag & drop
albumTiles.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER,onDragIn);
albumTiles.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP,onDragDrop);
}

private function onDragIn(e:NativeDragEvent):void {
if (_albumID)
NativeDragManager.acceptDragDrop(albumTiles);
}

Any ideas?

Shan

16 Apr 08 at 10:30 pm
if you want to drop a Image do this changes:

//called when the user drops an item over the component
private function onDragDrop(e:NativeDragEvent):void
{
//get the array of files being drug into the app
var arr:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;

//grab the files file
var f:File = File(arr[0]);

//create a FileStream to work with the file
var fs:FileStream = new FileStream();
fs.open(f, FileMode.READ);

//create a ByteArray to hold the imgae.
var ba:ByteArray = new ByteArray();

//Get the bytes from fileStrem, put the emty byteArray in for fill
//the zero is the start of the bytes to be read, fs.bytesAvailable same as length.
fs.readBytes(ba,0, fs.bytesAvailable);

//close the file
fs.close();

//display the contents of the file

//
newImage.source = ba;

}

Cato Paus Skrede

19 Apr 08 at 12:49 pm
can we do the vice versa:
dragging from AIR and dropping in to your system, and not specifically text or image, any kind of file?

kanu kukreja

1 May 08 at 11:44 pm
Hey Mike,

I noticed that the flex list base component does not fire the DRAG_DROP event? I’m trying to drag from the desktop onto a list component. any suggestions.

Patrick

7 May 08 at 12:11 pm
Hello,

I tried to pass DragAndDropExampleClass.as on a package but i have any result can someone help me please ?

Here the code:

main.mxml
—————————————————————————
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”
creationComplete=”initApp(event)” >

<mx:Script>
<![CDATA[
import com.pierre.Lecture;
import mx.events.FlexEvent;

private var converter:Lecture;
private function initApp(e:FlexEvent):void {
converter = new Lecture(outputField);
}
]]>
</mx:Script>

<mx:TextArea id=”outputField” top=”10″ left=”251″ right=”10″ bottom=”10″ />
<mx:Text text=”Drag a Text File into the Application” top=”11″ left=”10″ width=”233″ height=”148″/>

</mx:WindowedApplication>

Lecture.as
—————————————————————————
package com.pierre
{
import flash.desktop.ClipboardFormats;
import flash.desktop.NativeDragManager;
import flash.display.Sprite;
import flash.events.NativeDragEvent;
import flash.filesystem.File;
import flash.filesystem.FileMode;
import flash.filesystem.FileStream;

import mx.controls.Text;
import mx.controls.TextArea;

public class Lecture extends Sprite
{
private var dropField:Sprite = new Sprite();
private var outputField:Text = new Text();

public function Lecture(container:TextArea){
Init(container);
}

private function Init(container:TextArea):void {
dropField.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragIn);
dropField.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);
}

private function onDragIn(e:NativeDragEvent):void {
if(e.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT))
{
var files:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
if(files.length == 1)
{
NativeDragManager.acceptDragDrop(dropField);
}
}
}

private function onDragDrop(e:NativeDragEvent):void {
var arr:Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
var f:File = File(arr[0]);
var fs:FileStream = new FileStream();
fs.open(f, FileMode.READ);
var data:String = fs.readUTFBytes(fs.bytesAvailable);
fs.close();
outputField.text = data;
}

}
}

Pierre

15 Jun 08 at 8:57 am
YOU NOW NEED TO USE:

NativeDragManager.acceptDragDrop(this);

RATHER THAN:

DragManager.acceptDragDrop(this);

As of Flex builder 3 I think.

Rob

1 Aug 08 at 4:05 am
Thanks Rob :)

Napolux

22 Aug 08 at 5:11 am
[...] I’m using Flex in this example. There is some sample code out there (e.g. http://www.mikechambers.com/blog/2007/11/07/air-example-native-drag-and-drop/) but when I checked it out it hadn’t been updated for Flex 3. The example below is an updated [...]

Dabbling with Drag and Drop in Adobe AIR with Flex 3 « Golden Pebbles

3 Sep 08 at 4:32 am
[...] http://www.mikechambers.com/blog/2007/11/07/air-example-native-drag-and-drop/ [...]

Joey Rivera » Blog Archive » Uploader Phase 1

30 Oct 08 at 8:49 am
Here is an example of drag and drop using AIR in Flash CS3 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.

Joey Rivera

30 Oct 08 at 9:18 am
In case anybody else is confused by this; If you have a blank canvas and try to add a drag/drop event handler to it, the handlers won’t get fired unless you have something visual to drag to. Setting the background color of the canvas works.
Just like having a mouse event listener.

Nick Bilyk

4 Nov 08 at 11:56 am
I’m new to the drag and drop stuff in AIR, but I’m finding that using DragEvent instead of NativeDragEvent has been easier to work with. It works similar to NativeDragEvent, but only fires once when you drag over the object instead of every time a child object is dragged over.

Nick Bilyk

4 Nov 08 at 6:50 pm
Hi Mike,

I have the same question as Shan.
I would love to know how to use a specific component within your application accept native drag and drop operations (and not your entire application).

Thanks in advance,

Uli

Uli

6 Nov 08 at 12:45 am
Awesome code, Mike. I was able to integrate it in 2 minutes time, after changing my imports to the flex versions. Thanks!

Pamela Fox

11 Nov 08 at 5:34 pm
there’s a question that kanu kukreja made that remain unanswered.. i know that its possible to drag images out of AIR to the OS but i’m having trouble with copying the files.. i’m only able to move them…

Knamurwa

29 Jan 09 at 11:32 am
I am having the same req. as Kanu Kukerja,
Can I drag a Canvas or a component out of the Air app to the OS and make it a separate window..
Like the way browser tab if dragged spawns a new window.

PlanetTrinity

6 Feb 09 at 9:37 am
Is there any way to perform a native drop of a file from a web server to desktop? I’ve play with the FILE_LIST_FORMAT in the setData call on the clipboard but it will not accept any sort of URL other than a local file.

Bob Whiton

11 Feb 09 at 4:47 pm

Mike Chambers

AIR Example : Native Drag and Drop

22 Responses to 'AIR Example : Native Drag and Drop'

Leave a Reply

Site

Search

Twitter

Syndicate

Meta

Recent Photos