jQuery Custom File Upload Input (Enhancements)

This modification is a derived from the original work by Filament Group: http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>File Uploader</title>        
        <style>
            /* Style for demo, not required */
            body { font-size: 62.5%; margin: 50px; }
            fieldset { padding: .6em 0;border:0;border-top: 1px dotted #ddd; }
            legend { font-size: 1.5em; font-weight: bold; color: #555; padding: .5em 1em .5em 0; background: #fff;  }
            label { font-size: 1.4em; display: block; margin: .5em 10px .5em 0;  }
            input#upload { background: #aaa url(http://dl.dropbox.com/u/20165443/jsFiddle/images/jquery.fileinput.bg-btn.png) bottom repeat-x; padding: .4em 1.2em;border: 1px solid #aaa; color: #222; font-size: 1.2em; font-weight: bold; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; margin: 2em 0; }
            input#upload:hover { background: #eee; color: #111; border-color:#777; }

        </style>
    </head>
    <body>    
    
    <!-- realistic form attributes: <form action="#" method="post" enctype="multipart/form-data"> -->
    <form action="#" onsubmit="return false;">
        <fieldset>
            <legend>File Input Examples</legend>

            <label for="file_A">Default Style</label>
            <input type="file" name="file" id="file_A"/>

            <label for="file_B">Percentage Width</label>
            <input type="file" name="file" id="file_B"/>

            <label for="file_C">Custom Text</label>
            <input type="file" name="file" id="file_C"/>

            <label for="file_D">Test Auto-truncated file name (Try selecting a file with a long name and see what happens)</label>
            <input type="file" name="file" id="file_D"/>

            <label for="file_E">Button Only (I actually used this once to mashup with another jQuery plugin which enables multiple file uploads using a single button)</label>
            <input type="file" name="file"...

CSS

/**
 * ##1: Removed fixed with of .customfile
 * ##2: Added white-space: nowrap for text
 */
html, body {
    font-family: Arial;
    font-size: 11pt;
}

/*custom upload elements*/
.customfile-input {
    position:     absolute;
    height:       100px;
    cursor:       pointer;
    background:   transparent;
    border:       0;
    opacity:      0;
    -moz-opacity: 0;
    filter:       progid:DXImageTransform.Microsoft.Alpha(opacity = 0);
    z-index:      999;
}

.customfile {
    /*width: 400px;*/     /* ##1 -- */
    background:            #666;
    cursor:                pointer;
    overflow:              hidden;
    padding:               2px;
    border:                1px solid #444;
    -moz-border-radius:    7px;
    -webkit-border-radius: 7px;
    border-radius:         7px;
    position:              relative;

    /* ##2 ++ */
    white-space: nowrap;
}

.customfile-disabled {
    opacity: .5;
    filter:  progid:DXImageTransform.Microsoft.Alpha(opacity = 0);
    cursor:  default;
}

.customfile-feedback {
    /*display:    block;*/
    margin:     1px 1px 1px 5px;
    font-size:  1.2em;
    color:      #fff;
    font-style: italic;
    padding:    .3em .6em;
}

.customfile-feedback-populated {
    color:        #fff;
    font-style:   normal;
    font-weight:  bold;
    padding-left: 20px;
    background:   url(http://dl.dropbox.com/u/20165443/jsFiddle/images/jquery.fileinput.icon-generic.gif) left 4px no-repeat;
}

.customfile-button {
    border:                1px solid #999;
    background:            #333 url(http://dl.dropbox.com/u/20165443/jsFiddle/images/jquery.fileinput.bg-submit.gif) bottom repeat-x;
    color:                 #fff;
    font-weight:           bold;
    float:                 right;
    /*width:                 50px;*/ /* ##1 -- */
    padding:               .3em .6em;
    text-align:            center;
    text-decoration:       none;
    font-size:             1.2em;
    -moz-border-radius:    5px;
   ...

JavaScript

/**
 * --------------------------------------------------------------------
 * jQuery customfileinput plugin
 * Author: Scott Jehl, [email protected]
 * Copyright (c) 2009 Filament Group 
 * licensed under MIT (filamentgroup.com/examples/mit-license.txt)
 * --------------------------------------------------------------------
 */


/**
 * Modifications: Terry Young (terryyounghk at gmail dot com)
 *
 * ##1: Added 'option' parameter. Initially for optionally specifying a width. Default is 'inherit' (i.e. not specified)
 * ##2: Added options 'buttonText', 'inputText' and 'changeText'
 * ##3: Added option 'maxFileSize'. For this technique, @see: http://www.tizag.com/htmlT/htmlupload.php
 * ##4: Added auto-truncating the file name if text exceeds the available width (Uses the window.onresize event)
 * ##5: Added option 'showInputText'. Default is true
 * ##6: Added event handler 'onChange'
 */
$.fn.customFileInput = function(options){

    // ##1 ++
    var defaults = {
        width: 'inherit',
        buttonText: 'Browse',
        changeText: 'Change',
        inputText: 'No file selected',
        showInputText: true,
        maxFileSize: 0, // ##3 ++

        onChange: $.noop
    };

    // ##1 ++
    var opts = $.extend(true, {}, defaults, options);

    //apply events and styles for file input element
    var fileInput = $(this)
        .addClass('customfile-input') //add class for CSS
        .mouseover(function(){ upload.addClass('customfile-hover'); })
        .mouseout(function(){ upload.removeClass('customfile-hover'); })
        .focus(function(){
            upload.addClass('customfile-focus'); 
            fileInput.data('val', fileInput.val());
        })
        .blur(function(){ 
            upload.removeClass('customfile-focus');
            $(this).trigger('checkChange');
         })
         .bind('disable',function(){
             fileInput.attr('disabled',true);
            upload.addClass('customfile-disabled');
        })
       ...