File Chooser
A file chooser control the retrieve 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.
Note: Due to limitations in Internet Explorer, if you wish to use the file upload feature, you MUST define a hidden iframe in the page having both a name and id of "hidden_iframe".
Demo
Download
File Chooser is available under the terms of the GNU General Public License.
Source:
- filechooser.js
- filechooser.css
- filechooser-icons.zip - the default set of icons
Global dependencies for all controls:
- Prototype - an excellent Javascript object library
- prototype-base-extensions.js - extensions to the Prototype library
Usage
Constructor:
var chooser = new Control.FileChooser(element, handler, options);
Parameters:
- element - The CSS id of the <input> element
- handler - the function that handles fetching file/directory information
- options - an object with name/value pairs of additional options
Additional Options:
- icon - the icon to display in the right side of the input box
- parentImage - the icon to display next to a parent directory row
- fileImage - the icon to display next to a file row
- directoryImage - the icon to display next to a directory row
- Other options currently undocumented
Example:
new Control.FileChooser('my_filechooser', listUserFiles, {
icon: '/images/filechooser.png',
parentImage: '/images/parent.gif',
fileImage: '/images/file.gif',
directoryImage: '/images/directory.gif'
});
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":"/",
"status":"success",
"files":[
{"type":"directory",
"name":"test",
"size":0,"path":"/mydir"},
{"type":"file",
"name":"logo.tiff",
"size":264156,
"url":"/software/js/filestore/logo.tiff"},
{"type":"file",
"name":"photo.jpg",
"size":13792,
"url":"/software/js/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 PHP file manager:
- fileManager.php.txt (save as fileManager.php) - this does NO SECURITY CHECKING so use at your own risk.