Rating: 4.1/5 (27 votes)

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.



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>


To create file choosers out of all elements that match a given CSS rule:

Protoplasm.use('filechooser').transform(selector, fileHandler[, options]);


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:
icon The icon to display in the text box.
fileImage The file icon to use.
directoryImage The directory icon to use.
parentImage The parent directory icon to use.
uploadProgress Display upload progress in when uploading new files. Note that this requires special handling in your file manager script. See File Upload Handler documentation for more details, or view the sample file manager for an implementation example in PHP.

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:


To create a file chooser:

var chooser = new Control.FileChooser(element, fileHandler[, options]);

To destroy the file chooser:


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)


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.