I’ve been playing around with Adobe AIR lately and I’ve really been enjoying it. So I thought I’d put out this quick tutorial on how to drag and drop a file into your AIR application; in this case we will be using a CSV file, and then we will parse that file so that its data can be used in a datagrid. You can download the full source code here.
Dragging a file into AIR:
First, we need to set up handlers to listen for the drag events. We are going to set up two listeners, one for when an item is dragged over the app and one for when that item is dropped.
this.addEventListener(NativeDragEvent.NATIVE_DRAG_ENTER, dragEnterHandler);
this.addEventListener(NativeDragEvent.NATIVE_DRAG_DROP, dragDropHandler);
Then we’ll set up the two handler function. The dragEnterHandler function determines if the item is an acceptable file type. You could use the different constants of the ClipboardFormats class to only accept specific file formats, but for now we will accept any valid file.
private function dragEnterHandler(evt:NativeDragEvent):
void{
if(evt.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)){
NativeDragManager.acceptDragDrop(this);
}
}
Next, when the user drops the file, we will copy it from the clipboard, read its contents, and parse its values into a more usable data structure.
private function dragDropHandler(evt:NativeDragEvent):
void{
NativeDragManager.dropAction = NativeDragActions.COPY;
var dropFiles:Array = evt.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
var fileContent:String = getFileContent(dropFiles[0]);
orders = parseCSV(fileContent);
}
Reading the content of the dropped file:
For this we will use the FileStream class. The getFileContent function takes a generic file as its only parameter; it opens a FileStream, reads the contents of the file and returns that value as a string.
private function getFileContent(_file:File):String{
var fileStream:FileStream = new FileStream();
fileStream.open(_file, FileMode.READ);
var fileContent:String = fileStream.readUTFBytes(fileStream.bytesAvailable);
fileStream.close();
return fileContent;
}
Parsing the CSV file:
Finally, we are going to take the content of the CSV file, which is now in the form of a string, and parse out its data to populate an Array. We start by using the split() function to create an Array of line items. We use character code 10, which represents carriage returns, and character code 13, which represents new lines. to separate each line item. Then we loop through the newly created array of line items and pull out each comma separated value. At this point we have the information we need to populate the Order object and add that to our Array.
private function parseCSV(_content:String):Array{
var csvArray:Array =
new Array();
var csvLines:Array = _content.split(String.fromCharCode(13,10));
csvLines.splice(0,1);
for each(
var s:String
in csvLines){
var lineItems:Array = s.split(
“,”);
var transaction:Order =
new Order( lineItems[0],
new Date(lineItems[1]),
lineItems[2],
lineItems[3],
lineItems[4]);
csvArray.push(transaction);
}
return csvArray;
}
The data pulled from the CSV file is now in a more manageable form and can be used as a dataProvider for components or to populate AIR’s built in SQLite database. Of course, in this tutorial, for simplicity’s sake, we assume that the file dropped into the application is a CSV file. In your application you should have some trapping to determine the file type and process it accordingly.
