Ewen's Files

jQuery Style File Input Plugin

The Style File Input jQuery plugin provides a method for displaying a styled file input. It creates several extra elements in the DOM which, as can been seen in the demos below, can be freely styled in almost any way.

The plugin creates an element which will contain upto four other child elements; the first being a span in which the original file input is placed. The second child element is a button input; this is to represent the browse button. Third is a customisable element that is used to display the filename of the selected file, and finally, the fourth element is an optional link that is used for removing the selected file.

The options provided allow for a high level of customisation of the generated elements, for example the element which displays the selected file's filename can be any element, I have demonstrated this in the examples below using an input type=text for examples one and two, and a ol element for example three.

The HTML5 input file attribute multiple is also supported; this jQuery plugin will list the multiple selected files.

This plugin was inspired by Mika Tuupola's excellent jQuery plugin, however I found that I required more flexibility than this plugin could offer so I decided to make my own.

Please report any bugs that you find either in the SourceForge support forums or in the comments section below. If you have any suggestions or ideas for improvement please feel welcome to post them below.

This jQuery plugin has been tested and confirmed to work with jQuery 1.6.2 in the following browsers;

API

namespace : 'stylefileinput' ($.styleFileInput.defaults.namespace)
Namespace used for event binding and the first part of the container element's ID.
containerTagName : 'span' ($.styleFileInput.defaults.containerTagName)
The container element tag, can be anything really (within reason of course...)
containerClassName : 'stylefileinput-container' ($.styleFileInput.defaults.containerClassName)
The container element's className.
addClearLink : false ($.styleFileInput.defaults.addClearLink)
Create and add a link for removing a selected a file. This will only show when a file has been selected.
clearLinkText : ['Remove file', 'Remove files'] ($.styleFileInput.defaults.clearLinkText)
An array containing singular and plural text, if the browser does not support HTML5's Multiple attribute then only the first array item is required, otherwise the second array item should also be set.
buttonHoverClassName : 'hover' ($.styleFileInput.defaults.buttonHoverClassName)
The className to apply to the input button while hovering over the file input.
buttonActiveClassName : 'active' ($.styleFileInput.defaults.buttonActiveClassName)
The className to apply to the input button when a file has been selected.
buttonAttributes : {
    'class' : 'stylefileinput-button',
    value : 'Browse\u2026'
} ($.styleFileInput.defaults.buttonAttributes)
An object containing attributes to apply to the button element. This is applied using jQuery.attr().
textTagName : 'input' ($.styleFileInput.defaults.textTagName)
The element to use for displaying the selected file's filename.
textAttributes : {
    'class' : 'stylefileinput-text',
    type : 'text'
} ($.styleFileInput.defaults.textAttributes)
An object containing attributes to apply to the display text element. This is applied using jQuery.attr(). For default text on elements that are not input types pass an property called text, for example;
textAttributes : {
    'class' : 'stylefileinput-text',
    text : 'Select a file.'
}.
textFileListHtml : '<em>%s,</em>' $.styleFileInput.defaults.textFileListHtml)
If the selected file text element is not an input/textarea element then you can specify the HTML that is used to list the selected files. Place '%s' where ever you would like the filename to display.

Examples

Below are some examples demonstrating what can be achieved with the Style File Input jQuery plugin.

Internet Explorer needs extra styles which can be found in the source code of this page.

Browser Default

This is how the browser displays the file input by default;

Example One

Javascript
$('#example-one').styleFileInput();
CSS
span#stylefileinput-example-one
{
    position:relative;
}

span#stylefileinput-example-one span
{
    position:absolute;
    display:block;
    top:-2px;
    overflow:hidden;
    z-index:1;
    width:75px;
    height:24px;
    opacity:0;
    filter:alpha(opacity=0)
}

span#stylefileinput-example-one span input
{
    position:absolute;
    left:-140px;
    cursor:pointer
}

span#stylefileinput-example-one input.stylefileinput-button
{
    position:relative;
    z-index:0
}

Example Two

Javascript
$('#example-two').styleFileInput({
    addClearLink : true,
    textTagName : 'strong',
    textAttributes : {
        text : 'No file selected.'
    }
});
CSS
span#stylefileinput-example-two
{
    position:relative;
}

span#stylefileinput-example-two span
{
    position:absolute;
    display:block;
    top:-2px;
    overflow:hidden;
    z-index:1;
    width:75px;
    height:24px;
    opacity:0;
    filter:alpha(opacity=0)
}

span#stylefileinput-example-two span input
{
    position:absolute;
    left:-140px;
    cursor:pointer
}

span#stylefileinput-example-two input.stylefileinput-button
{
    position:relative;
    z-index:0
}

span#stylefileinput-example-two strong
{
    margin:0 10px
}

Example Three

(File icons can be found here)
Javascript
$('#example-three').styleFileInput({
    addClearLink : true,
    textTagName : 'ol',
    textAttributes : {
        text : ''
    }
    textFileListHtml : '<li>%s</li>'
});
CSS
span#stylefileinput-example-three
{
    position:relative;
    display:block
}

span#stylefileinput-example-three span
{
    position:absolute;
    display:block;
    top:0;
    overflow:hidden;
    z-index:1;
    width:48px;
    height:48px;
    opacity:0;
    filter:alpha(opacity=0)
}

span#stylefileinput-example-three span input
{
    position:absolute;
    left:-140px;
    height:48px;
    cursor:pointer
}

span#stylefileinput-example-three input.stylefileinput-button
{
    display:block;
    width:48px;
    height:48px;
    padding:0;
    margin:0;
    text-indent:-999em;
    background:url(file-icon.png) 0 0 no-repeat;
    border:none
}

span#stylefileinput-example-three input.stylefileinput-button.active
{
    background-position:-96px 0
}

span#stylefileinput-example-three input.stylefileinput-button.hover
{
    background-position:-48px 0
}

span#stylefileinput-example-three strong
{
    position:absolute;
    bottom:5px;
    left:50px;
    font-size:14px
}

span#stylefileinput-example-three a
{
    position:absolute;
    top:10px;
    left:50px;
    font-size:12px
}
Like my Stuff?

All the stuff I create and host on this site is free for personal and commercial use unless otherwise stated.

If you find a use for any of it and would like to show your appreciation you can send me a donation via PayPal.

Also it would be great if you could like, +1 or tweet any of the projects that you use.

Cheers, Ewen

Project Information

Name
jQuery Style File Input
Date Created
Sunday 25th September 2011
Description
The Style File Input jQuery plugin provides a method for displaying a styled file input. It creates several extra elements in the DOM which can be freely styled in almost any way.
Project Resources

Latest Projects

Project
PHP Character Converter
Date Created
Sunday 2nd October 2011
Description
Using a conversion library this class can convert the characters in a string, for example using the NATO Phonetics library, a string containing 'test' would be returned as 'tango e…
Project
jQuery Style File Input
Date Created
Sunday 25th September 2011
Description
The Style File Input jQuery plugin provides a method for displaying a styled file input. It creates several extra elements in the DOM which can be freely styled in almost any way.