The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
Styling File Inputs
This is a jQuery implementation of the SI_Files JS library created by Shaun Inman and described here: http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom.
It uses the same method of creating an upload button using a div with a background image, and then moving a transparent file field with the user's cursor as she hovers the div.
As opposed to other file field styling methods, this one worked as I intended even in complicated layouts, i.e. the controller is positioned inside a floating or relatively-positioned element.
It was tested successfully on Firefox 3 (Windows & Linux), IE 6 & 7, Safari 3.2 (on Windows), Opera 9.6 & Google Chrome 1.0.154.
Usage
The function can be applied on any set of file fields. It should be called on document ready state.
An options set can be passed to override some plug-in default behavior.
Example:
$(document).ready(function()
{
$(':file').si_files({
button: {
src: 'img/file_choose.gif',
width: 79,
height: 22
}
});
}Options
An options object can be passed, containing one or more of these arguments:
- pointer
- If True, sets the user's cursor to a pointer ("hand") when it moves over the controller.
Note: it seems that some browsers wouldn't change the cursor CSS value of a file field. If a solution is available, I'll be glad to add it.
Default: True. - width
- The controller's width. This is essential to render all of the controller's parts.
Default: 150px. - button
- The "upload" button image file source & dimensions. These should be set in an object like in the example above.
Default: file_choose.gif, 79 x 22 px. (If you wish to use this image file, please download it off my server. It was part of Inman's package.) - label
- If True, Appends a text span to display the user's selected file name.
Default: True. - label_class
- When label is set to True, this sets the label span's CSS class name.
Default: file_label. - cabinet_class
- Class name to use for the created file field's container div. This should get the same positioning CSS as the input field (i.e. float, position).
Default: file_cabinet. - debug
- Debug mode. Currently, only difference is the file field is half-visible in debug mode.
Known Issues / Todo
- A way to set a valid upload button (<button> element) instead of using a background image.
- Automatically collect field's positioning CSS and apply to cabinet (thereby eliminating the need of cabinet_class).
- Option for a default text to display in the label.
- Option for a "remove" button that resetts the controller without affecting the whole form.
