roeeyossef / jquery.nicefileinput.js

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

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
}