|
|
An application needs to prompt the user to select a file to open from the local system using a native dialog.
The File class allows an application to prompt the user to select one or more files of a specific type from the local system.
The File class provides numerous browse methods that present the native dialog for the specified operation. In the case of browsing for a single file to open, the appropriate method is File.browseForOpen(). This method takes a required string argument for the title of the dialog box, and an optional Array of FileFilter objects.
FileFilter objects allow an application to filter the viewable files in the native dialog box. This argument is null by default, which allows the user to select any file to which he would normally have access (i.e., not hidden files). An application can provide as many filters as necessary, by placing multiple FileFilter objects in an Array and passing that Array as the second argument to File.browseForOpen().
None of the browse methods on the File class is static, and as such, an existing reference to a valid File object must first be available. The directory represented by that File object reference will be selected by default when the dialog is displayed:
var file = air.File.documentsDirectory; var filters = new Array(); filters.push( new FileFilter( "Image Files", "*.jpg" ) ); file.browseForOpen( file, filters );
When a file selection has been made, Adobe AIR will raise an event in the issuing application. To catch that event, the application must have first registered an event listener. The event that gets raised is Event.SELECT, and an event object will be passed to the handler:
var file = air.File.documentsDirectory;
var filters = new Array();
filters.push( new air.FileFilter( "Image Files", "*.jpg" ) );
file.addEventListener( air.Event.SELECT, doSelect );
file.browseForOpen( file, filters );
function doSelect( event )
{
alert( file.nativePath );
}
A useful property of the Event object that is sent to the handler is the "target" which contains a reference to the originating File object. Nothing is returned from the dialog operation to be assigned to a File object, as the originating object will now hold a reference to the directory selected by the user. For this purpose, it may be beneficial to have a class or global reference to the File object, and even to reuse it:
<html>
<head>
<title>Selecting a File</title>
<style type="text/css">
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #0B333C;
}
</style>
<script type="text/javascript" src="airaliases.js"></script>
<script type="text/javascript">
var file = null;
function doBrowse()
{
var filters = new Array();
filters.push( new air.FileFilter( 'Image Files',
'*.jpg' ) );
file.browseForOpen( 'Select Photo', filters );
}
function doLoad()
{
file = air.File.documentsDirectory;
file.addEventListener( air.Event.SELECT, doSelect );
document.getElementById( 'browse' ).
addEventListener( 'click', doBrowse );
}
function doSelect( e )
{
var elem = document.createElement( 'div' );
elem.innerText = file.nativePath;
document.body.appendChild( elem );
}
</script>
</head>
<body onLoad="doLoad();">
<input id="browse" type="button" value="Browse" />
</body>
</html>
An application needs to prompt the user to select multiple files from the local system using the native dialog.
Use the File.browseForOpenMultiple() method to prompt the user with a dialog box that will allow for multiple file selection.
Using the File class to open a single file is predominantly the same as using the File class to open multiple files. In the case of allowing the user to select multiple files, the appropriate method to use is File.browseForOpenMultiple(). The File.browseForOpenMultiple() method takes the same two arguments that the File.browseForOpen() method takes: a String to be used in the title of the dialog, and an Array of FileFilter objects.
Once the user has selected the files from the dialog, FileListEvent.SELECT_MULTIPLE will be broadcast. The event object that is sent to the handler will be of type FileListEvent. The FileListEvent class contains a files property, which will be an Array of File objects representing the files that the user selected:
var file = air.File.documentsDirectory;
file.addEventListener( air.FileListEvent.SELECT_MULTIPLE,
doSelect );
function doSelect( event )
{
for( var f = 0; f < event.files.length; f++ )
{
...
}
}
Here is the complete code:
<html>
<head>
<title>Selecting Multiple Files</title>
<style type="text/css">
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #0B333C;
}
</style>
<script type="text/javascript" src="airaliases.js"></script>
<script type="text/javascript">
var file = null;
function doBrowse()
{
var filters = new Array();
filters.push( new air.FileFilter( 'Image Files',
'*.jpg' ) );
file.browseForOpenMultiple( 'Select Photos', filters );
}
function doLoad()
{
file = air.File.documentsDirectory;
file.addEventListener( air.FileListEvent.SELECT_MULTIPLE,
doSelect );
document.getElementById( 'browse' ).addEventListener
( 'click', doBrowse );
}
function doSelect( e )
{
var elem = null;
var name = null;
var size = null;
for( var f = 0; f < e.files.length; f++ )
{
name = e.files[f].name;
size = Math.ceil( e.files[f].size / 1000 );
elem = document.createElement( 'div' );
elem.innerText = name + ' (' + size + ' KB)';
document.body.appendChild( elem );
}
}
</script>
</head>
<body onLoad="doLoad();">
<input id="browse" type="button" value="Browse" />
</body>
</html>
Application requirements dictate that you allow users to select a directory in which they will store data.
Use the File.browseForDirectory() method to prompt the user to select a directory.
The File.browseForDirectory() method creates a native dialog box that allows users to select a directory. The method takes a required String argument, which will be used to provide additional information to the user about the purpose of the selected directory.
When a directory selection has been made, Adobe AIR will raise an event in the issuing application. To catch that event, the application must have first registered an event listener. The event that gets raised is Event.SELECT, and an event object will be passed to the handler:
var file = air.File.applicationStorageDirectory;
file.addEventListener( air.Event.SELECT, doSelect );
file.browseForDirectory( "Where do you want to store your
photos?" );
function doSelect( event )
{
alert( file.nativePath );
}
Nothing is returned from the dialog operation to be assigned to a File object, as the originating object will now hold a reference to the directory selected by the user. For this purpose, it may be beneficial to have a class or global reference to the File object, and even to reuse it:
<html>
<head>
<title>Selecting a Directory</title>
<style type="text/css">
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
color: #0B333C;
}
</style>
<script type="text/javascript" src="airaliases.js"></script>
<script type="text/javascript">
var directory = null;
function doBrowse()
{
directory.browseForDirectory( 'Select a directory of
files:' );
}
function doLoad()
{
directory = air.File.documentsDirectory;
directory.addEventListener( air.Event.SELECT, doSelect );
document.getElementById( 'browse' ).addEventListener
( 'click', doBrowse );
}
function doSelect( e )
{
var files = directory.getDirectoryListing();
var elem = null;
var name = null;
var mod = null;
var size = null;
for( var f = 0; f < files.length; f++ )
{
name = files[f].name;
mod = files[f].modificationDate;
mod = ( mod.month + 1 ) + '/' + mod.date + '/' +
mod.fullYear;
size = Math.ceil( files[f].size / 1000 ) + ' KB';
elem = document.createElement( 'div' );
elem.innerText = name + ' is ' + size + '
and was last modified on ' + mod;
document.body.appendChild( elem );
}
}
</script>
</head>
<body onLoad="doLoad();">
<input id="browse" type="button" value="Browse" />
</body>
</html>
|
|