What does this control do?
Allows the user to select a remote file browsing through directories. The information about files and directories is provided by a specially formatted server-side response.
For an usage example check out the Meteora.Filebrowser demo.
How to use
In order to use this control, paste this line of javascript right
at the beginning of your script tag:
You'll need a div that will act as a container for the Filebrowser.
You may then by able to invoke the Filebrowser this way:
// ELEMENT
// The Datagrid will be nested inside this element.
// You may use an element's id or an HTML element's reference here.
'div_id',
// DATA SOURCE
'/path/to/json/script',
{
// OPTIONS
}
);
When the filebrowser is loaded it will immediately query its data source for the path ''/'' (its root path)
/path/to/json/script?path=/
And everytime you click in any file or directory, a new request needs to be made. Suppose you click a subdirectory named fruits:
/path/to/json/script?path=/fruits
A new list of files of the fruits subdirectory will be shown, and suppose you click the apple.txt file inside the fruits subdirectory:
/path/to/json/script?path=/fruits/apple.txt
Developers are free to program the behaviour of the script that receives user actions, this control only displays files and sends or receive request.
Here is a server side response example:
// Current path (the one we are viewing)
'path': '/current/path',
// Current path's data
'info': {
// Full path
'path: '/current/path',
// Extension
'ext': 'path',
// Base name
'name': 'path',
// Size (bytes)
'size': 4096,
// Type
'type': {
// Is this a directory?
'dir': true,
// Is this a simple file?
'file': false,
// Is this a symbolic link?
'link': false
}
},
// Array of files that are on this path
'files': [
{
// The same structure we use above is used here
'path': '/current/path/foo.txt',
'ext': 'txt',
'name': 'foo.txt',
'size': 3445,
'type': {
'dir': false,
'file': true,
'link': false
},
// This could be an icon, for example
'html': '<img src="foo.png" /> foo.txt'
},
{
'path': '/current/path/bar.txt',
'ext': 'txt',
'name': 'bar.txt',
'size': 18872,
'type': {
'dir': false,
'file': true,
'link': false
},
'html': '<img src="bar.png" /> bar.txt'
},
{
'path': '/current/path/more',
'ext': 'more',
'name': 'more',
'size': 4096,
'type': {
'dir': true,
'file': false,
'link': false
},
'html': '<img src="folder.png" /> more'
}
]
}