Accessing Local Files (JavaScript)
The AIR SDK throught the AIRAliases.js file exposes the Flash flash.filesystem.File class that provides a number of methods for accessing the filesystem. In this tutorial we will concentrate on how to allow the user to access a file on the local system, specfically an image file and display it.
Before we Begin
Make sure you have the latest SDK and runtime installed. After you have created your new project through the Eclipse you will most
likely have to edit two parts of the application.xml file. Change the application tag (below) and remove the ".M5"
Additionally you will need to add a <filename> tag. I usually make sure that its the same as the title of my project, something along the lines of <filename>DirectoryAccess</filename>.
The JavaScript
So lets get started with the Javascript! Make sure you have included the AIRAliases.js file into your HTML page, without that you will not get far.
<script type="text/javascript">
function doOnLoad()
{
//default to the users documents directory
file = air.File.documentsDirectory;
//set up the event listener to the fire when a user selects a file
file.addEventListener( air.Event.SELECT, doSelectImage );
//set up event listener to the click event of the button
document.getElementById( 'browse' ).addEventListener( 'click', doBrowseForImage );
}
function doBrowseForImage()
{
//we can filter the types of files we want to display
var fileFilters = new runtime.Array();
//we are going to restrict the files to jpg and gif images
fileFilters.push( new air.FileFilter( 'JPG', '*.jpg' ) );
fileFilters.push( new air.FileFilter( 'GIF', '*.gif' ) );
//we now open a file browser.
file.browseForOpen( 'Select Image', fileFilters );
}
function doSelectImage( e )
{
//create an image element to display the selected image
var el = document.createElement( 'img' );
//set the src attribute of the img tag to the file URL this will allow the image to be displayed
el.src = file.url;
document.body.appendChild( el );
}
</script>
I've broken up the code into a couple of different functions. The doOnload function gets called by the onload event of the HTML body tag, this is kind of our initialization routine. I assign my file variable with the the directory to the users documents directory and attach an event listener to the select event that will fire once a user has selected a file. I also attached an event listener to a HTML button's onclick event that will then call my doBrowserForImage function.
Once the user clicks on the browse button the doBrowseForImages function is fired. Since I only want the user to be able to select jpg or gif files I create an array that I call fileFilters and add two file filters to the array using the air.FileFilter() method. When I call the browseForOpen method I pass in my array of filters which then restricts it to only the filetypes I specified.
The doSelectImage function is fired once the users selects an image and clicks the Open button on the file browser. I then create a HTML image tag and assign the source (src) attribute the URL of the selected file. We use the URL attribute here instead of the nativePath attribute because the src attribute of the image tag needs a URL to the image and not a file path like c:\images\myimage.jpg. The url to such a file would look like file:///c:/images/myimage.jpg. This URL is also operating system agnostic meaning it is the same format on both Unix/Linux flavored operating systems as well as Microsoft Windows.
The HTML
The HTML is relatively simple. As you can see below we use the onload event of the body tag to call our doOnLoad() javascript function, we also have a button that we attach the event listener to in our Javascript code
<input id="browse" type="button" value="Browse" />
</body>
Conclusion
The browseForOpen function, which is part of the File class, returns a reference to the selected file. With this reference we can access a number of properties and methods for the specified file. In this tutorial we were only interested in the URL property of the file which enabled us to display the image in the AIR window using the HTML IMG tag.