Saturday, April 23, 2011

Working with clipboard in AIR: Part 10

Today we're going to learn how to make it possible for users to drag files into our AIR application. We will create a simple image viewer program.

First of all make an UILoader component and put it on the stage. Give it an instance name of picField. This is where our dragged-in files will be displayed. Create a new dynamic text field and put it over or below the UILoader, call it pathText. This is where we will display the native path of the file.

Now, for the coding. We need to add a listener for a NATIVE_DRAG_ENTER event and call acceptDragDrop(). In this example, I am using the whole stage as the drop box. This means that the user will be able to drop his file anywhere on the application screen.

stage.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragIn);

function onDragIn(evt:NativeDragEvent):void
{
NativeDragManager.acceptDragDrop(stage);
}

Now, we need a listener for NATIVE_DRAG_DROP:

stage.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);

When the user drops the file, we are ready to display it. We can get the information that is stored in the clipboard, and that is a FileList array object. We need to refer to the element with the index 0 of that array, because we can display only one file at once in our image viewer. From there, we can extract data just with like every File object.

Before displaying the picture, we need to check its extension. AIR will throw an error if we try to set the source of our UILoader to a, for example, exe or html file, instead of an image or an swf.

When we check the extension, we can set the source of the picture container to the nativePath of the File object, as well as display the path in the text field.

function onDragDrop(evt:NativeDragEvent):void
{
var fileFormat:String = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT)[0].extension;
if (fileFormat == "jpg" || fileFormat == "gif" || fileFormat == "png")
{
picField.source = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT)[0].nativePath;
pathText.text = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT)[0].nativePath;
}
}

Here's the full code:

stage.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, onDragIn);

function onDragIn(evt:NativeDragEvent):void
{
NativeDragManager.acceptDragDrop(stage);
}

stage.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);

function onDragDrop(evt:NativeDragEvent):void
{
var fileFormat:String = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT)[0].extension;
if (fileFormat == "jpg" || fileFormat == "gif" || fileFormat == "png")
{
picField.source = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT)[0].nativePath;
pathText.text = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT)[0].nativePath;
}
}

Now we can drag jpg, gif and png files to our AIR application and they will be displayed in the UILoader container.

Thanks for reading!

Related:

Working with clipboard in AIR: Part 1
Working with clipboard in AIR: Part 2
Working with clipboard in AIR: Part 3
Working with clipboard in AIR: Part 4
Working with clipboard in AIR: Part 5
Working with clipboard in AIR: Part 6
Working with clipboard in AIR: Part 7
Working with clipboard in AIR: Part 8
Working with clipboard in AIR: Part 9

4 comments:

Anonymous said...

Hey, great tutorial. Where can get the code from all 10 parts together? Is there a final source? I'm struggling with some errors...

Rasi said...

What is the significance of MouseDown and MouseUP, how do we use it correctly. Please shed some light. Thanks

Kirill Poletaev said...

To Anonymous:
This 10-part tutorial series does not have just one application in result - I explain different aspects of using clipboard over the course. In this particular part, we create a simple image viewer application, with source code shown in the end of the tutorial.

To Rasi:
MouseDown and MouseUp are events that are dispatched when the user holds down their mouse, or releases their mouse. But perhaps I misunderstood youre question? If so, don't hesitate to ask again, but provide more details.

Anonymous said...

gfgdgdfgdfgdf

Post a Comment