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
}