File Chooser
A file chooser control that retrieves file/directory information via a user-provided function. Most function handlers will communicate with a server via XMLHttpRequest. When selecting a file, if the file is an image, a preview will display in the right panel. To open the chooser, click the icon at the right side of the input box.
Demo
Source Example
<html>
<head>
<script language="javascript" src="protoplasm.js"></script>
<script language="javascript">
// File list handler. See sections below for details
function listFiles(directory, callback) {
new Ajax.Request('/software/protoplasm/control/fileManager.php', {
parameters: { 'a': 'listdir', 'd': (directory || '') },
onComplete: function(response) {
callback(eval('(' + response.responseText + ')'));
}
});
}
Protoplasm.use('filechooser').transform('input.filechooser', listFiles);
</script>
</head>
<body>
<input type="text" name="filename" class="filechooser" />
</body>
</html>
Usage
To create file choosers out of all elements that match a given CSS rule:
Protoplasm.use('filechooser').transform(selector, fileHandler[, options]);
Parameters:
| Parameter | Required | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| selector | yes | A CSS rule matching the text inputs to turn into file choosers | ||||||||||
| fileHandler | yes | A file handling function to fetch directory contents. | ||||||||||
| options | no |
An object (hash) containing name/value pairs of additional options.
Available options:
|
Advanced Usage
If you want more control over creation and destruction of the file chooser, you can instantiate it manually instead of using Protoplasm.transform.
In your <head> section:
Protoplasm.use('filechooser');
To create a file chooser:
var chooser = new Control.FileChooser(element, fileHandler[, options]);
To destroy the file chooser:
chooser.destroy();
For more details, see the API documentation for Control.FileChooser.
File Handling Function
The file listing function takes two parameters: directory and callback. Callback is a function reference passed by the File Chooser object. The listing function is expected to create an object with the following structure and pass it back via the callback function:
{"path":"/test",
"parent":"/",
"url":"/software/protplasm/filestore/test",
"status":"success",
"files":[
{"type":"directory",
"name":"test",
"size":0,
"path":"/mydir",
"url":"/software/protplasm/filestore/mydir"},
{"type":"file",
"name":"logo.tiff",
"size":264156,
"url":"/software/protplasm/filestore/logo.tiff"},
{"type":"file",
"name":"photo.jpg",
"size":13792,
"url":"/software/protplasm/filestore/photo.jpg"}
],
"fileManager":"/software/js/fileManager.php"}
The fileManager property is used by File Chooser to upload files, create and delete directories, and delete files. The HTTP requests sent for those tasks use the following parameters:
- a - the action to take. One of "upload", "createdir", or "delete".
- p - the parent directory of the object.
Additional parameters for "upload":
- i - the uploaded file (using multipart/form-data encoding)
- n - the new filename to use (without path information; see "p" parameter)
Additional parameters for "createdir":
- d - the directory name (without path information; see "p" parameter)
Additional parameters for "delete":
- f - the file or directory name (without path information; see "p" parameter)
Examples:
http://<fileManager>?a=createdir&p=mydir/test&d=newdir
http://<fileManager>?a=delete&p=mydir&f=myimage.jpg
Simple AJAX file manager used in source code example above:
- fileManager.php.txt (save as fileManager.php) - this does NO SECURITY CHECKING so use at your own risk.