jquery-nicefileinput

jQuery Plugin which makes file input CSS styling an easy task.


Keywords
jquery, plugin, file, input, css
License
MIT
Install
bower install jquery-nicefileinput

Documentation

NiceFileInput.js jQuery Plugin

jQuery PlugIn which makes easy to stylize with CSS the file inputs at your forms.

Live Demo

Live demo page: jQuery.NiceFileInput

About

Customizing the HTML file input elements (<input type="file" />) is a time-consuming task which doesnt result the same way on different browsers. NiceFileInput makes things easy and transforms the fileinputs on 3 different HTML elements (a text input, a button and a div container) which you can style with CSS the way you'll do it normally.

NiceFileInput.js is a script based on the previous work of Shaun Inman, who defined the concept behind NiceFileInput ( Styling File Inputs with CSS and the DOM ) and Mika Tuupola, who implemented nicely the idea in a jQuery plugin in some different way ( FileStyle), so most of this plugin credit goes for them.

NiceFileInput degrades gracefully, if the user has no javascript enabled on the browser, a regular <input type="file" /> element will be there.

Requirements

NiceFileInput requires the jQuery library, available at the JQuery website jQuery.com or through the Google CDN's Content Distribution Network Google Libraries API @ Google Code

How to use it

  1. First, make sure you link the jQuery library and the NiceFileInput plugin to your Web page.

    By using your local copy of jQuery:
    <script src="/your_path/jquery.min.js"></script>
    <script src="/your_path/jquery.nicefileinput.min.js"></script>
    Or using the Google CDN's
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script src="/your_path/jquery.nicefileinput.min.js"></script>
  2. Insert the code which triggers the plugin on the jQuery Elements you want to apply it.

    <script type="text/javascript">
    /* <![CDATA[ */
    $(document).ready(function(){
        // your code...
        $("input[type=file]").nicefileinput();
    });
    /* ]]> */
    </script>

    You may optionally set the defult label text:

    $("input[type=file]").nicefileinput({
        label : 'Examinar...' // Spanish label
    });

Customize the input file with CSS

You can fully customize the look and feel of your file input in two ways:

By using the same CSS code to stylize all your File Input elements through the following classes
.NFI-wrapper {
    // the container div
}
.NFI-button {
    // the button div element
}
.NFI-filename {
    // the text input element which collects and shows the value
}
Or setting the class atribute of the input file element you want to stylize individually
// define a class on your HTML file input element
// <input type="file" class="nice" />
// so you can now write your CSS code as follows:
.nice {
    // the container div
}
.nice .NFI-button {
    // the button div element
}
.nice .NFI-filename {
    // the text input element which collects and shows the value
}