Simple Flex util component to support dragging files from Desktop into Flex-AIR application.

July 25, 2007

I created quickly this component to make your mxml code simpler if you want to support dragging files into your Flex/AIR application.

You would only have to add the FlexAIRDrag tag and link the UIComponent and react to the DropEvent which would occur the moment files are dropped inside the defined UIComponent.

Sample application :

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:WindowedApplication xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:etech=”com.adobe.etech.*” creationComplete=”this.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDownTitle);” layout=”absolute” >
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import flash.desktop.DragManager;
            import flash.desktop.DragActions;
            import mx.events.DragEvent;
            import flash.desktop.TransferableData;
            import flash.desktop.TransferableFormats;
            import flash.events.NativeDragEvent;
            import com.adobe.etech.DropEvent;       
            import flash.filesystem.File;   

        private function onMouseDownTitle(evt:MouseEvent):void
        {
            stage.window.startMove();
        }
        private function onDrop(event:DropEvent):void {
            for each (var file:File in event.dropfiles){
                  Alert.show("This file was dragged in window : " + file.name);
            }                               
        }
        ]]>
    </mx:Script>

    <etech:FlexAIRDrag uiComponent=”{panelDrop}” FlexAIRDrag=”onDrop(event)” />

    <mx:Panel id=”panelDrop”  width=”636″ height=”378″/>   
</mx:WindowedApplication>

You can download the source files here.